From a1147851e3ee7f801ce6caaf8a71c355fb2317d2 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Sat, 31 Aug 2024 16:14:15 +0200
Subject: [PATCH] update docs

---
 vue/docs/404.html                             |    6 +-
 vue/docs/api/CChart.api.html                  |    6 +-
 vue/docs/api/accordion/CAccordion.api.html    |    6 +-
 .../api/accordion/CAccordionBody.api.html     |    6 +-
 .../api/accordion/CAccordionButton.api.html   |    6 +-
 .../api/accordion/CAccordionHeader.api.html   |    6 +-
 .../api/accordion/CAccordionItem.api.html     |    6 +-
 vue/docs/api/alert/CAlert.api.html            |    6 +-
 vue/docs/api/alert/CAlertHeading.api.html     |    6 +-
 vue/docs/api/alert/CAlertLink.api.html        |    6 +-
 vue/docs/api/avatar/CAvatar.api.html          |    6 +-
 vue/docs/api/backdrop/CBackdrop.api.html      |    6 +-
 vue/docs/api/badge/CBadge.api.html            |    6 +-
 vue/docs/api/breadcrumb/CBreadcrumb.api.html  |    6 +-
 .../api/breadcrumb/CBreadcrumbItem.api.html   |    6 +-
 .../api/button-group/CButtonGroup.api.html    |    6 +-
 .../api/button-group/CButtonToolbar.api.html  |    6 +-
 vue/docs/api/button/CButton.api.html          |    6 +-
 vue/docs/api/calendar/CCalendar.api.html      |    6 +-
 vue/docs/api/callout/CCallout.api.html        |    6 +-
 vue/docs/api/card/CCard.api.html              |    6 +-
 vue/docs/api/card/CCardBody.api.html          |    6 +-
 vue/docs/api/card/CCardFooter.api.html        |    6 +-
 vue/docs/api/card/CCardGroup.api.html         |    6 +-
 vue/docs/api/card/CCardHeader.api.html        |    6 +-
 vue/docs/api/card/CCardImage.api.html         |    6 +-
 vue/docs/api/card/CCardImageOverlay.api.html  |    6 +-
 vue/docs/api/card/CCardLink.api.html          |    6 +-
 vue/docs/api/card/CCardSubtitle.api.html      |    6 +-
 vue/docs/api/card/CCardText.api.html          |    6 +-
 vue/docs/api/card/CCardTitle.api.html         |    6 +-
 vue/docs/api/carousel/CCarousel.api.html      |    6 +-
 .../api/carousel/CCarouselCaption.api.html    |    6 +-
 vue/docs/api/carousel/CCarouselItem.api.html  |    6 +-
 .../api/close-button/CCloseButton.api.html    |    6 +-
 vue/docs/api/collapse/CCollapse.api.html      |    6 +-
 .../CConditionalTeleport.api.html             |    6 +-
 .../api/coreui-icons-vue/src/CIcon.api.html   |    6 +-
 .../coreui-icons-vue/src/CIconSvg.api.html    |    6 +-
 vue/docs/api/date-picker/CDatePicker.api.html |    6 +-
 .../CDateRangePicker.api.html                 |    6 +-
 vue/docs/api/dropdown/CDropdown.api.html      |    6 +-
 .../api/dropdown/CDropdownDivider.api.html    |    6 +-
 .../api/dropdown/CDropdownHeader.api.html     |    6 +-
 vue/docs/api/dropdown/CDropdownItem.api.html  |    6 +-
 vue/docs/api/dropdown/CDropdownMenu.api.html  |    6 +-
 .../api/dropdown/CDropdownToggle.api.html     |    6 +-
 vue/docs/api/footer/CFooter.api.html          |    6 +-
 vue/docs/api/form/CForm.api.html              |    6 +-
 vue/docs/api/form/CFormCheck.api.html         |    6 +-
 vue/docs/api/form/CFormControl.api.html       |    6 +-
 .../api/form/CFormControlValidation.api.html  |    6 +-
 .../api/form/CFormControlWrapper.api.html     |    6 +-
 vue/docs/api/form/CFormFeedback.api.html      |    6 +-
 vue/docs/api/form/CFormFloating.api.html      |    6 +-
 vue/docs/api/form/CFormInput.api.html         |    6 +-
 vue/docs/api/form/CFormLabel.api.html         |    6 +-
 vue/docs/api/form/CFormRange.api.html         |    6 +-
 vue/docs/api/form/CFormSelect.api.html        |    6 +-
 vue/docs/api/form/CFormSwitch.api.html        |    6 +-
 vue/docs/api/form/CFormText.api.html          |    6 +-
 vue/docs/api/form/CFormTextarea.api.html      |    6 +-
 vue/docs/api/form/CInputGroup.api.html        |    6 +-
 vue/docs/api/form/CInputGroupText.api.html    |    6 +-
 vue/docs/api/grid/CCol.api.html               |    6 +-
 vue/docs/api/grid/CContainer.api.html         |    6 +-
 vue/docs/api/grid/CRow.api.html               |    6 +-
 vue/docs/api/header/CHeader.api.html          |    6 +-
 vue/docs/api/header/CHeaderBrand.api.html     |    6 +-
 vue/docs/api/header/CHeaderDivider.api.html   |    6 +-
 vue/docs/api/header/CHeaderNav.api.html       |    6 +-
 vue/docs/api/header/CHeaderText.api.html      |    6 +-
 vue/docs/api/header/CHeaderToggler.api.html   |    6 +-
 vue/docs/api/image/CImage.api.html            |    6 +-
 vue/docs/api/link/CLink.api.html              |    6 +-
 vue/docs/api/list-group/CListGroup.api.html   |    6 +-
 .../api/list-group/CListGroupItem.api.html    |    6 +-
 .../loading-button/CLoadingButton.api.html    |    6 +-
 vue/docs/api/modal/CModal.api.html            |    6 +-
 vue/docs/api/modal/CModalBody.api.html        |    6 +-
 vue/docs/api/modal/CModalFooter.api.html      |    6 +-
 vue/docs/api/modal/CModalHeader.api.html      |    6 +-
 vue/docs/api/modal/CModalTitle.api.html       |    6 +-
 .../api/multi-select/CMultiSelect.api.html    |    6 +-
 .../CMultiSelectNativeSelect.api.html         |    6 +-
 .../multi-select/CMultiSelectOptions.api.html |    6 +-
 .../CMultiSelectSelection.api.html            |    6 +-
 vue/docs/api/nav/CNav.api.html                |    6 +-
 vue/docs/api/nav/CNavGroup.api.html           |    6 +-
 vue/docs/api/nav/CNavGroupItems.api.html      |    6 +-
 vue/docs/api/nav/CNavItem.api.html            |    6 +-
 vue/docs/api/nav/CNavLink.api.html            |    6 +-
 vue/docs/api/nav/CNavTitle.api.html           |    6 +-
 vue/docs/api/navbar/CNavbar.api.html          |    6 +-
 vue/docs/api/navbar/CNavbarBrand.api.html     |    6 +-
 vue/docs/api/navbar/CNavbarNav.api.html       |    6 +-
 vue/docs/api/navbar/CNavbarText.api.html      |    6 +-
 vue/docs/api/navbar/CNavbarToggler.api.html   |    6 +-
 vue/docs/api/offcanvas/COffcanvas.api.html    |    6 +-
 .../api/offcanvas/COffcanvasBody.api.html     |    6 +-
 .../api/offcanvas/COffcanvasHeader.api.html   |    6 +-
 .../api/offcanvas/COffcanvasTitle.api.html    |    6 +-
 vue/docs/api/pagination/CPagination.api.html  |    6 +-
 .../api/pagination/CPaginationItem.api.html   |    6 +-
 .../api/pagination/CSmartPagination.api.html  |    6 +-
 vue/docs/api/picker/CPicker.api.html          |    6 +-
 .../api/placeholder/CPlaceholder.api.html     |    6 +-
 vue/docs/api/popover/CPopover.api.html        |    6 +-
 vue/docs/api/progress/CProgress.api.html      |    6 +-
 vue/docs/api/progress/CProgressBar.api.html   |    6 +-
 .../api/progress/CProgressStacked.api.html    |    6 +-
 vue/docs/api/rating/CRating.api.html          |    6 +-
 vue/docs/api/sidebar/CSidebar.api.html        |    6 +-
 vue/docs/api/sidebar/CSidebarBrand.api.html   |    6 +-
 vue/docs/api/sidebar/CSidebarFooter.api.html  |    6 +-
 vue/docs/api/sidebar/CSidebarHeader.api.html  |    6 +-
 vue/docs/api/sidebar/CSidebarNav.api.html     |    6 +-
 vue/docs/api/sidebar/CSidebarToggler.api.html |    6 +-
 .../CSmartPagination.api.html                 |    6 +-
 vue/docs/api/smart-table/CSmartTable.api.html |    6 +-
 .../api/smart-table/CSmartTableBody.api.html  |    6 +-
 .../smart-table/CSmartTableCleaner.api.html   |    6 +-
 .../smart-table/CSmartTableFilter.api.html    |    6 +-
 .../api/smart-table/CSmartTableHead.api.html  |    6 +-
 .../CSmartTableItemsPerPageSelector.api.html  |    6 +-
 vue/docs/api/spinner/CSpinner.api.html        |    6 +-
 vue/docs/api/table/CTable.api.html            |    6 +-
 vue/docs/api/table/CTableBody.api.html        |    6 +-
 vue/docs/api/table/CTableCaption.api.html     |    6 +-
 vue/docs/api/table/CTableDataCell.api.html    |    6 +-
 vue/docs/api/table/CTableFoot.api.html        |    6 +-
 vue/docs/api/table/CTableHead.api.html        |    6 +-
 vue/docs/api/table/CTableHeaderCell.api.html  |    6 +-
 vue/docs/api/table/CTableRow.api.html         |    6 +-
 vue/docs/api/tabs/CTab.api.html               |    6 +-
 vue/docs/api/tabs/CTabContent.api.html        |    6 +-
 vue/docs/api/tabs/CTabList.api.html           |    6 +-
 vue/docs/api/tabs/CTabPane.api.html           |    6 +-
 vue/docs/api/tabs/CTabPanel.api.html          |    6 +-
 vue/docs/api/tabs/CTabs.api.html              |    6 +-
 vue/docs/api/time-picker/CTimePicker.api.html |    6 +-
 .../time-picker/CTimePickerRollCol.api.html   |    6 +-
 vue/docs/api/toast/CToast.api.html            |    6 +-
 vue/docs/api/toast/CToastBody.api.html        |    6 +-
 vue/docs/api/toast/CToastClose.api.html       |    6 +-
 vue/docs/api/toast/CToastHeader.api.html      |    6 +-
 vue/docs/api/toast/CToaster.api.html          |    6 +-
 vue/docs/api/tooltip/CTooltip.api.html        |    6 +-
 .../CVirtualScroller.api.html                 |    6 +-
 vue/docs/api/widgets/CWidgetStatsA.api.html   |    6 +-
 vue/docs/api/widgets/CWidgetStatsB.api.html   |    6 +-
 vue/docs/api/widgets/CWidgetStatsC.api.html   |    6 +-
 vue/docs/api/widgets/CWidgetStatsD.api.html   |    6 +-
 vue/docs/api/widgets/CWidgetStatsE.api.html   |    6 +-
 vue/docs/api/widgets/CWidgetStatsF.api.html   |    6 +-
 ....html-RliG702a.js => 404.html-DU2TjE25.js} |    2 +-
 .../assets/CAccordion.api.html-B6uisqsk.js    |   15 +
 .../assets/CAccordion.api.html-BmmCbR4F.js    |   15 -
 .../CAccordionBody.api.html-BxSpa71p.js       |   15 +
 .../CAccordionBody.api.html-DnDWpn--.js       |   15 -
 .../CAccordionButton.api.html-BFZVkVlR.js     |   15 -
 .../CAccordionButton.api.html-DPUd2qPX.js     |   15 +
 .../CAccordionHeader.api.html-D3E3-RrY.js     |   15 -
 .../CAccordionHeader.api.html-DhPR4UFM.js     |   15 +
 .../CAccordionItem.api.html-B_Gvnaeq.js       |   15 -
 .../CAccordionItem.api.html-DZGPOsD9.js       |   15 +
 vue/docs/assets/CAlert.api.html-BXIVhpa9.js   |   15 +
 vue/docs/assets/CAlert.api.html-BXjHGX6m.js   |   15 -
 .../assets/CAlertHeading.api.html-BKJ9BC30.js |   15 +
 .../assets/CAlertHeading.api.html-DoJskrT2.js |   15 -
 .../assets/CAlertLink.api.html-Be4cejDR.js    |   15 -
 .../assets/CAlertLink.api.html-DG0vJpCf.js    |   15 +
 vue/docs/assets/CAvatar.api.html-BTqEczbV.js  |   15 -
 vue/docs/assets/CAvatar.api.html-CKyQof1f.js  |   15 +
 .../assets/CBackdrop.api.html-BlEIpUAI.js     |   15 +
 .../assets/CBackdrop.api.html-DAmzayp3.js     |   15 -
 vue/docs/assets/CBadge.api.html-CgAts6f4.js   |   15 -
 vue/docs/assets/CBadge.api.html-FxK3PsZy.js   |   15 +
 .../assets/CBreadcrumb.api.html-5lgjZmeY.js   |   15 +
 .../assets/CBreadcrumb.api.html-DqwjKss4.js   |   15 -
 .../CBreadcrumbItem.api.html-CPH_CfEm.js      |   15 +
 .../CBreadcrumbItem.api.html-r9RgIwJD.js      |   15 -
 vue/docs/assets/CButton.api.html-CiQ_g2gW.js  |   15 +
 vue/docs/assets/CButton.api.html-ekRjLD2P.js  |   15 -
 .../assets/CButtonGroup.api.html-BVG1ANZ_.js  |   15 +
 .../assets/CButtonGroup.api.html-D0mJf4Og.js  |   15 -
 .../CButtonToolbar.api.html-BLBUlnfS.js       |   15 +
 .../CButtonToolbar.api.html-IKoND_KL.js       |   15 -
 .../assets/CCalendar.api.html-77BmaEcE.js     |   15 +
 .../assets/CCalendar.api.html-C4aT9FYA.js     |   15 -
 vue/docs/assets/CCallout.api.html-DiF4unWf.js |   15 -
 vue/docs/assets/CCallout.api.html-KoizcUs-.js |   15 +
 vue/docs/assets/CCard.api.html-BmbaZsmK.js    |   15 -
 vue/docs/assets/CCard.api.html-CWzyD8X0.js    |   15 +
 .../assets/CCardBody.api.html-BECQVBUH.js     |   15 +
 .../assets/CCardBody.api.html-D0-tGYrD.js     |   15 -
 .../assets/CCardFooter.api.html-CI_3qzYg.js   |   15 +
 .../assets/CCardFooter.api.html-CiSjk2NS.js   |   15 -
 .../assets/CCardGroup.api.html-BABSBoJe.js    |   15 -
 .../assets/CCardGroup.api.html-DH7EZxGl.js    |   15 +
 .../assets/CCardHeader.api.html-CWFYp2G5.js   |   15 +
 .../assets/CCardHeader.api.html-D5ZqQVdw.js   |   15 -
 .../assets/CCardImage.api.html-BBnb9-GW.js    |   15 -
 .../assets/CCardImage.api.html-CUCskHkB.js    |   15 +
 .../CCardImageOverlay.api.html-CNgKoO9s.js    |   15 +
 .../CCardImageOverlay.api.html-TpPKznie.js    |   15 -
 .../assets/CCardLink.api.html-Dxett-Ui.js     |   15 +
 .../assets/CCardLink.api.html-MlyoVRZ4.js     |   15 -
 .../assets/CCardSubtitle.api.html-Cl-ezx9Z.js |   15 -
 .../assets/CCardSubtitle.api.html-Dh4UbxxY.js |   15 +
 .../assets/CCardText.api.html-Bg0_JF9j.js     |   15 +
 .../assets/CCardText.api.html-CeB8bETl.js     |   15 -
 .../assets/CCardTitle.api.html-BIewfA00.js    |   15 -
 .../assets/CCardTitle.api.html-Cvqug47a.js    |   15 +
 .../assets/CCarousel.api.html-B6WYH3KM.js     |   15 -
 .../assets/CCarousel.api.html-DvQ7vBAQ.js     |   15 +
 .../CCarouselCaption.api.html-CJ2Co3Eg.js     |   15 -
 .../CCarouselCaption.api.html-Ry9R9ID5.js     |   15 +
 .../assets/CCarouselItem.api.html-Bx_efOFH.js |   15 -
 .../assets/CCarouselItem.api.html-CQ58r3xO.js |   15 +
 vue/docs/assets/CChart.api.html-BFRT-Fhg.js   |   15 -
 vue/docs/assets/CChart.api.html-BPKhb3Ee.js   |   15 +
 .../assets/CCloseButton.api.html-DVHA5VBo.js  |   15 +
 .../assets/CCloseButton.api.html-X5Fmd0Tk.js  |   15 -
 vue/docs/assets/CCol.api.html-DFGWxu75.js     |   15 -
 vue/docs/assets/CCol.api.html-Fe-NnVcD.js     |   15 +
 .../assets/CCollapse.api.html-CxTOAM8U.js     |   15 +
 .../assets/CCollapse.api.html-zVmsFw74.js     |   15 -
 .../CConditionalTeleport.api.html-7PMLb_Wk.js |   15 -
 .../CConditionalTeleport.api.html-BsPLiQQG.js |   15 +
 .../assets/CContainer.api.html-CJReqk6k.js    |   15 -
 .../assets/CContainer.api.html-O3JlICl7.js    |   15 +
 .../assets/CDatePicker.api.html-BmlaHdUZ.js   |   15 -
 .../assets/CDatePicker.api.html-C1Ro8UbJ.js   |   15 +
 .../CDateRangePicker.api.html-BXCpvTjX.js     |   15 +
 .../CDateRangePicker.api.html-Hlubmql2.js     |   15 -
 .../assets/CDropdown.api.html-DGIxjfQ3.js     |   15 -
 .../assets/CDropdown.api.html-DVi36nMQ.js     |   15 +
 .../CDropdownDivider.api.html-DRPOqN6s.js     |   15 +
 .../CDropdownDivider.api.html-VSQ_XlFl.js     |   15 -
 .../CDropdownHeader.api.html-BFaZEh4a.js      |   15 +
 .../CDropdownHeader.api.html-Cxpz-KV-.js      |   15 -
 .../assets/CDropdownItem.api.html-BVulLqSR.js |   15 -
 .../assets/CDropdownItem.api.html-YfOt4ZPU.js |   15 +
 .../assets/CDropdownMenu.api.html-BOqkAy5z.js |   15 +
 .../assets/CDropdownMenu.api.html-BckpImA4.js |   15 -
 .../CDropdownToggle.api.html-TBTSZRQO.js      |   15 +
 .../CDropdownToggle.api.html-unfICPox.js      |   15 -
 vue/docs/assets/CFooter.api.html-CH8Pc0Ax.js  |   15 -
 vue/docs/assets/CFooter.api.html-DCPx9oeQ.js  |   15 +
 vue/docs/assets/CForm.api.html-2ixEm0A1.js    |   15 -
 vue/docs/assets/CForm.api.html-D6NiMRuP.js    |   15 +
 .../assets/CFormCheck.api.html-Bf9lhFvH.js    |   15 -
 .../assets/CFormCheck.api.html-Bl-fuUMn.js    |   15 +
 .../assets/CFormControl.api.html-BEVjOQjL.js  |   15 +
 .../assets/CFormControl.api.html-D9-r3st8.js  |   15 -
 ...FormControlValidation.api.html-CDKpaVG3.js |   15 -
 ...FormControlValidation.api.html-fn-8iM1r.js |   15 +
 .../CFormControlWrapper.api.html-BYVnVI9z.js  |   15 +
 .../CFormControlWrapper.api.html-D75G__Lh.js  |   15 -
 .../assets/CFormFeedback.api.html-C33zL_Pk.js |   15 +
 .../assets/CFormFeedback.api.html-Cs8xHqDe.js |   15 -
 .../assets/CFormFloating.api.html-C-X3BFM6.js |   15 -
 .../assets/CFormFloating.api.html-CqfeIH6c.js |   15 +
 .../assets/CFormInput.api.html-BDOLWxtk.js    |   15 +
 .../assets/CFormInput.api.html-CVvr0T_h.js    |   15 -
 .../assets/CFormLabel.api.html-C3nnUCqL.js    |   15 +
 .../assets/CFormLabel.api.html-CpQQKu1b.js    |   15 -
 .../assets/CFormRange.api.html-C4Wns1Lr.js    |   15 -
 .../assets/CFormRange.api.html-C9Fi8SJ1.js    |   15 +
 .../assets/CFormSelect.api.html-4dvFandI.js   |   15 -
 .../assets/CFormSelect.api.html-Dz_dg5lQ.js   |   15 +
 .../assets/CFormSwitch.api.html-BACw_Adx.js   |   15 +
 .../assets/CFormSwitch.api.html-CyrjItfh.js   |   15 -
 .../assets/CFormText.api.html-BJqLcA9t.js     |   15 +
 .../assets/CFormText.api.html-CpJOPSQg.js     |   15 -
 .../assets/CFormTextarea.api.html-C-PBE2Mw.js |   15 +
 .../assets/CFormTextarea.api.html-DMhqjvWY.js |   15 -
 vue/docs/assets/CHeader.api.html-CJg_IEiF.js  |   15 -
 vue/docs/assets/CHeader.api.html-DlxZXRgK.js  |   15 +
 .../assets/CHeaderBrand.api.html-4A7AgRNX.js  |   15 -
 .../assets/CHeaderBrand.api.html-CFKRvz1W.js  |   15 +
 .../CHeaderDivider.api.html-DKNK6-VZ.js       |   15 -
 .../CHeaderDivider.api.html-WXk5c_Vn.js       |   15 +
 .../assets/CHeaderNav.api.html-BG2UOwMu.js    |   15 +
 .../assets/CHeaderNav.api.html-Bbsph2xH.js    |   15 -
 .../assets/CHeaderText.api.html-DpmaCM7o.js   |   15 +
 .../assets/CHeaderText.api.html-dosyBX2D.js   |   15 -
 .../CHeaderToggler.api.html-BQ00oQEl.js       |   15 +
 .../CHeaderToggler.api.html-BlIes8qe.js       |   15 -
 vue/docs/assets/CIcon.api.html-B3u-PJZc.js    |   15 -
 vue/docs/assets/CIcon.api.html-DXua_Pop.js    |   15 +
 vue/docs/assets/CIconSvg.api.html-Bu8_TLiB.js |   15 +
 vue/docs/assets/CIconSvg.api.html-DboTNlH1.js |   15 -
 vue/docs/assets/CImage.api.html-1rNq-hNU.js   |   15 +
 vue/docs/assets/CImage.api.html-C1zwuBO9.js   |   15 -
 .../assets/CInputGroup.api.html-B9Jacvbh.js   |   15 -
 .../assets/CInputGroup.api.html-O1rxMtka.js   |   15 +
 .../CInputGroupText.api.html-CjjBv0Qa.js      |   15 +
 .../CInputGroupText.api.html-nYw0lYnn.js      |   15 -
 vue/docs/assets/CLink.api.html-6FAjEedH.js    |   15 -
 vue/docs/assets/CLink.api.html-CkkUHkLl.js    |   15 +
 .../assets/CListGroup.api.html-BoJSzdjE.js    |   15 +
 .../assets/CListGroup.api.html-CWB2ebuP.js    |   15 -
 .../CListGroupItem.api.html-B75RiEoP.js       |   15 -
 .../CListGroupItem.api.html-QGIAoVEf.js       |   15 +
 .../CLoadingButton.api.html-BBbFgjn5.js       |   15 +
 .../CLoadingButton.api.html-DlKJUvsa.js       |   15 -
 vue/docs/assets/CModal.api.html-8P7cw-ZY.js   |   15 -
 vue/docs/assets/CModal.api.html-CcahfjI1.js   |   15 +
 .../assets/CModalBody.api.html-BVcd8oVP.js    |   15 +
 .../assets/CModalBody.api.html-CHE1pY1A.js    |   15 -
 .../assets/CModalFooter.api.html-BOfY4tP-.js  |   15 +
 .../assets/CModalFooter.api.html-BsNGmVfu.js  |   15 -
 .../assets/CModalHeader.api.html-Dg9LwxqA.js  |   15 -
 .../assets/CModalHeader.api.html-DoHVd2NU.js  |   15 +
 .../assets/CModalTitle.api.html-BBDuhOrq.js   |   15 -
 .../assets/CModalTitle.api.html-ZPHhqxhp.js   |   15 +
 .../assets/CMultiSelect.api.html-B9pw_7rn.js  |   15 -
 .../assets/CMultiSelect.api.html-DieqOVIP.js  |   15 +
 ...ltiSelectNativeSelect.api.html-CIhoy8ZE.js |   15 +
 ...ltiSelectNativeSelect.api.html-Mfuatll8.js |   15 -
 .../CMultiSelectOptions.api.html-DivQq4t9.js  |   15 -
 .../CMultiSelectOptions.api.html-DtAlk_Hc.js  |   15 +
 ...CMultiSelectSelection.api.html-CUdfepD8.js |   15 +
 ...CMultiSelectSelection.api.html-D2u4Hpu2.js |   15 -
 vue/docs/assets/CNav.api.html-BFqXbscE.js     |   15 +
 vue/docs/assets/CNav.api.html-CHflKJ-r.js     |   15 -
 .../assets/CNavGroup.api.html-B69rD5K0.js     |   15 -
 .../assets/CNavGroup.api.html-CQwUJgTt.js     |   15 +
 .../CNavGroupItems.api.html-B0aFIsJL.js       |   15 +
 .../CNavGroupItems.api.html-MzViYoW-.js       |   15 -
 vue/docs/assets/CNavItem.api.html-BluVGAkl.js |   15 -
 vue/docs/assets/CNavItem.api.html-D9aqO2xw.js |   15 +
 vue/docs/assets/CNavLink.api.html-2gObI4eE.js |   15 +
 vue/docs/assets/CNavLink.api.html-BLbL7bWh.js |   15 -
 .../assets/CNavTitle.api.html-B5pzzmsO.js     |   15 -
 .../assets/CNavTitle.api.html-jwhtM3Ht.js     |   15 +
 vue/docs/assets/CNavbar.api.html-Bpr_rlAN.js  |   15 +
 vue/docs/assets/CNavbar.api.html-D6jrKQQE.js  |   15 -
 .../assets/CNavbarBrand.api.html-iAKNmT2K.js  |   15 -
 .../assets/CNavbarBrand.api.html-wHe16RAc.js  |   15 +
 .../assets/CNavbarNav.api.html-BvIABqX_.js    |   15 +
 .../assets/CNavbarNav.api.html-DTmYoiRc.js    |   15 -
 .../assets/CNavbarText.api.html-DXM-0CeX.js   |   15 +
 .../assets/CNavbarText.api.html-DhRgVY0Q.js   |   15 -
 .../CNavbarToggler.api.html-BHSE5jxT.js       |   15 -
 .../CNavbarToggler.api.html-Du6cS1F2.js       |   15 +
 .../assets/COffcanvas.api.html--9epuLuW.js    |   15 -
 .../assets/COffcanvas.api.html-C1yrjIbI.js    |   15 +
 .../COffcanvasBody.api.html-Cuyu4m1t.js       |   15 +
 .../COffcanvasBody.api.html-DpuEcC8p.js       |   15 -
 .../COffcanvasHeader.api.html-C94tOX9J.js     |   15 +
 .../COffcanvasHeader.api.html-CA3y4VF-.js     |   15 -
 .../COffcanvasTitle.api.html-BCDNOR0i.js      |   15 -
 .../COffcanvasTitle.api.html-DWPpS-Pe.js      |   15 +
 .../assets/CPagination.api.html-CDazWQCT.js   |   15 +
 .../assets/CPagination.api.html-mFhXc4Yf.js   |   15 -
 .../CPaginationItem.api.html-Bsa5oQkt.js      |   15 -
 .../CPaginationItem.api.html-CrJi52XB.js      |   15 +
 vue/docs/assets/CPicker.api.html-Da5Hysn9.js  |   15 -
 vue/docs/assets/CPicker.api.html-oSkyMXwU.js  |   15 +
 .../assets/CPlaceholder.api.html-CpcOzpbr.js  |   15 -
 .../assets/CPlaceholder.api.html-TZhyRjR4.js  |   15 +
 vue/docs/assets/CPopover.api.html-tQSUMLbj.js |   15 +
 vue/docs/assets/CPopover.api.html-ymVfjSSe.js |   15 -
 ...SSng.js => CProgress.api.html-DtBG3iso.js} |    4 +-
 .../assets/CProgressBar.api.html-BjA2nShz.js  |   15 -
 .../assets/CProgressBar.api.html-DbiY29uU.js  |   15 +
 .../CProgressStacked.api.html-D0_SIwt3.js     |   15 +
 .../CProgressStacked.api.html-iS9rdju9.js     |   15 -
 vue/docs/assets/CRating.api.html-CbBSuHpA.js  |   15 -
 vue/docs/assets/CRating.api.html-c48h2dsU.js  |   15 +
 vue/docs/assets/CRow.api.html-BfZBZHbO.js     |   15 +
 vue/docs/assets/CRow.api.html-CIrSW5Ga.js     |   15 -
 vue/docs/assets/CSidebar.api.html-CTwTsKKM.js |   15 +
 vue/docs/assets/CSidebar.api.html-DaxOjldv.js |   15 -
 .../assets/CSidebarBrand.api.html-BDwVBijp.js |   15 +
 .../assets/CSidebarBrand.api.html-CMvNigzU.js |   15 -
 .../CSidebarFooter.api.html-9MYkXiDf.js       |   15 +
 .../CSidebarFooter.api.html-DG6rj4Di.js       |   15 -
 .../CSidebarHeader.api.html-CFlZhoRs.js       |   15 +
 .../CSidebarHeader.api.html-UjLXre_-.js       |   15 -
 .../assets/CSidebarNav.api.html-DPgns5YK.js   |   15 +
 .../assets/CSidebarNav.api.html-ZV8snc4P.js   |   15 -
 .../CSidebarToggler.api.html-CCzfHjoN.js      |   15 +
 .../CSidebarToggler.api.html-CwaVG0LH.js      |   15 -
 .../CSmartPagination.api.html-BikuSyAw.js     |   15 -
 .../CSmartPagination.api.html-BtDrxSb-.js     |   15 +
 .../CSmartPagination.api.html-CrCaD_lP.js     |   15 -
 .../CSmartPagination.api.html-CtPxYRy0.js     |   15 +
 .../assets/CSmartTable.api.html-DBtpefqV.js   |   15 -
 .../assets/CSmartTable.api.html-DGm1bmhO.js   |   15 +
 .../CSmartTableBody.api.html-BnkPBl42.js      |   15 -
 .../CSmartTableBody.api.html-Ct54x_n5.js      |   15 +
 .../CSmartTableCleaner.api.html-Ca51YF0C.js   |   15 -
 .../CSmartTableCleaner.api.html-D3V7dsv2.js   |   15 +
 .../CSmartTableFilter.api.html-B7_1b50f.js    |   15 -
 .../CSmartTableFilter.api.html-DUCc6wnW.js    |   15 +
 .../CSmartTableHead.api.html-BObUzIwn.js      |   15 +
 .../CSmartTableHead.api.html-DW9ZUntG.js      |   15 -
 ...eItemsPerPageSelector.api.html-BcdEUUOn.js |   15 +
 ...eItemsPerPageSelector.api.html-BqX7W_5v.js |   15 -
 vue/docs/assets/CSpinner.api.html-O0NhTV-x.js |   15 -
 vue/docs/assets/CSpinner.api.html-tz9ud1zw.js |   15 +
 vue/docs/assets/CTab.api.html-C_8FIEMx.js     |   15 +
 vue/docs/assets/CTab.api.html-DOCKLIPZ.js     |   15 -
 .../assets/CTabContent.api.html-1j4Vrr4K.js   |   15 +
 .../assets/CTabContent.api.html-C2PinBa9.js   |   15 -
 vue/docs/assets/CTabList.api.html-BEqv9sl7.js |   15 -
 vue/docs/assets/CTabList.api.html-Cmt2uvE5.js |   15 +
 vue/docs/assets/CTabPane.api.html-B47A_sq6.js |   15 -
 vue/docs/assets/CTabPane.api.html-CNWr2MmF.js |   15 +
 .../assets/CTabPanel.api.html-CZYhUIL_.js     |   15 -
 .../assets/CTabPanel.api.html-Civ-9a5a.js     |   15 +
 vue/docs/assets/CTable.api.html-D0dRnCW-.js   |   15 -
 vue/docs/assets/CTable.api.html-DNonlxhT.js   |   15 +
 .../assets/CTableBody.api.html-BE5qkKGP.js    |   15 +
 .../assets/CTableBody.api.html-BFPdQqw6.js    |   15 -
 .../assets/CTableCaption.api.html-MTWPlJR7.js |   15 -
 .../assets/CTableCaption.api.html-phSXI7iF.js |   15 +
 .../CTableDataCell.api.html-CTzr6HkH.js       |   15 +
 .../CTableDataCell.api.html-r0s-YiAY.js       |   15 -
 .../assets/CTableFoot.api.html-DcRu-Wur.js    |   15 +
 .../assets/CTableFoot.api.html-FVtyDTMQ.js    |   15 -
 .../assets/CTableHead.api.html-CuaSabQj.js    |   15 -
 .../assets/CTableHead.api.html-jC7mLOK8.js    |   15 +
 .../CTableHeaderCell.api.html-BDiQC33l.js     |   15 +
 .../CTableHeaderCell.api.html-DahKEodk.js     |   15 -
 .../assets/CTableRow.api.html-BS0zN1Kr.js     |   15 +
 .../assets/CTableRow.api.html-Bh9JvciN.js     |   15 -
 vue/docs/assets/CTabs.api.html-BFEYxLzk.js    |   15 -
 vue/docs/assets/CTabs.api.html-DnMHi3vy.js    |   15 +
 .../assets/CTimePicker.api.html-B1LPdULH.js   |   15 -
 .../assets/CTimePicker.api.html-C_1ZXYrv.js   |   15 +
 .../CTimePickerRollCol.api.html-BP01-pLv.js   |   15 +
 .../CTimePickerRollCol.api.html-CKuM6oLe.js   |   15 -
 vue/docs/assets/CToast.api.html-CMbe9i1s.js   |   15 +
 vue/docs/assets/CToast.api.html-CrpEOCPn.js   |   15 -
 .../assets/CToastBody.api.html-4viEj-di.js    |   15 -
 .../assets/CToastBody.api.html-JaBADYAu.js    |   15 +
 .../assets/CToastClose.api.html-D5MPMBvN.js   |   15 -
 .../assets/CToastClose.api.html-YQ6mj1QO.js   |   15 +
 .../assets/CToastHeader.api.html-Bb_cYC6K.js  |   15 +
 .../assets/CToastHeader.api.html-Bp3krdZ3.js  |   15 -
 vue/docs/assets/CToaster.api.html-CZ4AWR-a.js |   15 -
 vue/docs/assets/CToaster.api.html-DIlPMx7J.js |   15 +
 vue/docs/assets/CTooltip.api.html-BG1bcVkZ.js |   15 +
 vue/docs/assets/CTooltip.api.html-Dd9JcsKh.js |   15 -
 .../CVirtualScroller.api.html-CYqYd6bS.js     |   15 +
 .../CVirtualScroller.api.html-OI5523Hm.js     |   15 -
 .../assets/CWidgetStatsA.api.html-CQAWIPeh.js |   15 +
 .../assets/CWidgetStatsA.api.html-DD_G_0XR.js |   15 -
 .../assets/CWidgetStatsB.api.html-8R9003Ye.js |   15 +
 .../assets/CWidgetStatsB.api.html-BDmKGNGc.js |   15 -
 .../assets/CWidgetStatsC.api.html-BEjn1BPd.js |   15 +
 .../assets/CWidgetStatsC.api.html-Ck65oxiQ.js |   15 -
 .../assets/CWidgetStatsD.api.html-C6jHMRVC.js |   15 -
 .../assets/CWidgetStatsD.api.html-vMUwQLz_.js |   15 +
 .../assets/CWidgetStatsE.api.html-8FNgCETA.js |   15 +
 .../assets/CWidgetStatsE.api.html-WqFr1dq3.js |   15 -
 .../assets/CWidgetStatsF.api.html-Bs-3Tpfk.js |   15 +
 .../assets/CWidgetStatsF.api.html-DQOglbDZ.js |   15 -
 ...allout-BG7mA_TE.js => Callout-dZyg6Lm9.js} |    2 +-
 ...sDocs-BzcEAHFR.js => ScssDocs-DPTK8YLD.js} |   42 +-
 .../assets/accessibility.html-BI4xofDT.js     |   15 +
 .../assets/accessibility.html-CkVUBrW4.js     |   15 -
 ...DPn8cCyj.js => accordion.html-1-bBbpuj.js} |   15 +-
 ...UG.js => admin-dashboard.html-CseRtZFD.js} |    5 +-
 vue/docs/assets/alert.html-Aeh8K-Wf.js        |  486 +++++
 vue/docs/assets/alert.html-CDqS0NZ4.js        |  486 -----
 .../{app-BoHWg5jI.js => app-DGOUrGv-.js}      | 1476 ++++++-------
 ...ml-CGvuFR7Q.js => avatar.html-BD-B4lfD.js} |   23 +-
 ...tml-BIxXbpUI.js => badge.html-Dear1jUq.js} |   20 +-
 ...P6FIBpg.js => breadcrumb.html-DgLYIaPr.js} |   13 +-
 vue/docs/assets/breakpoints.html-C6u5z98e.js  |   36 +
 vue/docs/assets/breakpoints.html-TXDgB0cd.js  |   36 -
 ...wKiVg.js => button-group.html-7uksYI0F.js} |   23 +-
 ...ml-Tm2d-w3G.js => button.html-D00S-NDK.js} |   28 +-
 vue/docs/assets/calendar.html-Dj___bk9.js     |  247 +++
 vue/docs/assets/calendar.html-aIZ63-sL.js     |  174 --
 ...l-BHcngsku.js => callout.html-BvHwLp1x.js} |   15 +-
 ...html-CiiNUsv5.js => card.html-itUqRb0K.js} |   49 +-
 ...-DN2cjEdX.js => carousel.html-B0BciYS9.js} |   18 +-
 ...tml-DY5wyS1U.js => chart.html-CeyziBqZ.js} |   18 +-
 ...-BL-hSbtE.js => checkbox.html-BPgHXfGt.js} |   43 +-
 ...vGpt.js => checks-radios.html-CKmk8NM1.js} |   34 +-
 ...-GrP8.js => close-button.html-blWDZBC3.js} |   11 +-
 vue/docs/assets/collapse.html-CXLzPe5v.js     |  193 ++
 vue/docs/assets/collapse.html-CuA1iHpy.js     |  190 --
 ...l-c_8p-0J4.js => columns.html-DRAqgR3h.js} |   20 +-
 ...C6_LN_j.js => containers.html-DgTza5yR.js} |   10 +-
 vue/docs/assets/contents.html-41bLmuls.js     |   15 +
 vue/docs/assets/contents.html-CKe33LGP.js     |   15 -
 .../assets/css-variables.html-DBEGBYvO.js     |   15 +
 .../assets/css-variables.html-UJYgUBzW.js     |   15 -
 vue/docs/assets/customize.html-C0-AGXsg.js    |   38 +
 vue/docs/assets/customize.html-CNlse-Z8.js    |   38 -
 ...rgyOW0.js => date-picker.html-BHuOUNDP.js} |   72 +-
 ....js => date-range-picker.html-Bs7ll3rY.js} |   82 +-
 vue/docs/assets/download.html-91eC3PyH.js     |   15 -
 vue/docs/assets/download.html-B0ATzToD.js     |   15 +
 ...-D58fBbQW.js => dropdown.html-C4NgwOey.js} |   37 +-
 ...jU.js => floating-labels.html-CCkOOAc0.js} |   12 +-
 ...ml-DN3ns744.js => footer.html-CSFrT_Wq.js} |   11 +-
 ...LSWS5.js => form-control.html-CxCiB4bb.js} |   19 +-
 ...html-D9aeBmOt.js => grid.html-t8D6bS23.js} |   21 +-
 ...l-BqQUwcbR.js => gutters.html-SyYvHCgl.js} |   14 +-
 vue/docs/assets/header.html-B_Q5U0MU.js       |  183 ++
 vue/docs/assets/header.html-DBfVFFNJ.js       |  180 --
 ...html-C2C1fAVP.js => icon.html-ivU2m4Fv.js} |   96 +-
 ...tml-DC5HLYH1.js => image.html-G4Gptwhr.js} |   11 +-
 vue/docs/assets/index.html-CXtJwXEn.js        |   11 +
 ...4KH7gA.js => input-group.html-DD48IpLE.js} |   29 +-
 ...tml-BPr4o7jo.js => input.html-DQVoju7F.js} |   21 +-
 vue/docs/assets/installation.html-B9oaQNAO.js |   15 -
 vue/docs/assets/installation.html-CwOfF37v.js |   15 +
 ...ibolQ.js => introduction.html-B-WFaD00.js} |   18 +-
 ...ml-DARLKo8o.js => layout.html-B1WhSZXl.js} |   16 +-
 ...html-C2tbxGSf.js => link.html-DgFWlsMX.js} |    7 +-
 ...hBEIPwp.js => list-group.html-_udCts7M.js} |   30 +-
 ...l81.js => loading-button.html-DU_pRN89.js} |   11 +-
 ...tml-KOyG7M6n.js => modal.html-BHtWUNx_.js} |  208 +-
 vue/docs/assets/multi-select.html-DP6UryqG.js |  539 -----
 vue/docs/assets/multi-select.html-DtyKZra7.js |  540 +++++
 ...ml-BCzYXKko.js => navbar.html-DiQHPkAN.js} |  112 +-
 ...BwFsuHAs.js => navs-tabs.html-R9_id4Dp.js} |   84 +-
 vue/docs/assets/offcanvas.html-CuZ5zSJ3.js    |  571 +++++
 vue/docs/assets/offcanvas.html-D6TxFWNe.js    |  570 -----
 ...l-B9kdngTZ.js => options.html-Oj00yCyN.js} |    2 +-
 ...-DEHhVOWL.js => overview.html-D68slxn-.js} |    9 +-
 ...lNq3AJ1.js => pagination.html-B6kiDLSr.js} |   18 +-
 ...rpG9kK.js => placeholder.html-BZpO7heW.js} |   21 +-
 ...l-CcictLyq.js => popover.html-DDOrxn8Z.js} |   51 +-
 ...-DAixQyXt.js => progress.html-DhAMxmt8.js} |   24 +-
 ...tml-cF7KwA9W.js => radio.html-DdZZGITP.js} |   34 +-
 ...tml-DLE7qJRM.js => range.html-DnftQdHW.js} |   15 +-
 ...ml-COUjsjjF.js => rating.html-DDgDjKeh.js} |   33 +-
 vue/docs/assets/sass.html-DHfDOQ32.js         |   15 -
 vue/docs/assets/sass.html-QPkiTP49.js         |   15 +
 ...ml-CGOG4_GI.js => select.html-HAuQZbve.js} |   13 +-
 ....js => setupDevtools-HHDGOOYC-8SYwYjCZ.js} |    2 +-
 ...l-CrmBFQhh.js => sidebar.html-sk3JAtdU.js} |   16 +-
 ...M.js => smart-pagination.html-C0KPe66-.js} |   10 +-
 ...qyM7wC.js => smart-table.html-CuXPF5Vb.js} | 1903 +++++++++--------
 ...l-Dja_Ea9Q.js => spinner.html-CbcVdjbB.js} |   18 +-
 ...{style-CM2j93lE.css => style-V4DqbpUk.css} |  173 +-
 ...ml-CzcyoMGb.js => switch.html-C_xLNHwA.js} |   16 +-
 ...tml-BKhXilE_.js => table.html-aCVCSEDl.js} |  416 ++--
 ...html-BryTxUY8.js => tabs.html-BjypzLaI.js} |   21 +-
 ...-VjAtYprD.js => textarea.html-Ck18GNEv.js} |   13 +-
 ...V52mWV.js => time-picker.html-CvM-vSGB.js} |   45 +-
 ...tml-B70IM5zC.js => toast.html-DUmgmbI1.js} |   43 +-
 ...l-D2DMDPTK.js => tooltip.html-COZMp0t7.js} |   43 +-
 vue/docs/assets/v4.html-Br_AIuga.js           |   15 -
 vue/docs/assets/v4.html-qK__BZTD.js           |   15 +
 vue/docs/assets/v5.html-Csxq3zcX.js           |   15 +
 vue/docs/assets/v5.html-D8yxOVYF.js           |   15 -
 ...QwCYaBH.js => validation.html-BZBLONBB.js} |   69 +-
 ...4.js => virtual-scroller.html-se47tihX.js} |    7 +-
 ...l-CX3InA_E.js => widgets.html-DaxyknU_.js} |   17 +-
 vue/docs/components/accordion.html            |    6 +-
 vue/docs/components/alert.html                |    6 +-
 vue/docs/components/avatar.html               |    6 +-
 vue/docs/components/badge.html                |    6 +-
 vue/docs/components/breadcrumb.html           |    6 +-
 vue/docs/components/button-group.html         |    6 +-
 vue/docs/components/button.html               |    6 +-
 vue/docs/components/calendar.html             |    8 +-
 vue/docs/components/callout.html              |    6 +-
 vue/docs/components/card.html                 |    6 +-
 vue/docs/components/carousel.html             |    6 +-
 vue/docs/components/chart.html                |    6 +-
 vue/docs/components/close-button.html         |    6 +-
 vue/docs/components/collapse.html             |    6 +-
 vue/docs/components/dropdown.html             |    6 +-
 vue/docs/components/footer.html               |    6 +-
 vue/docs/components/header.html               |    6 +-
 vue/docs/components/icon.html                 |    6 +-
 vue/docs/components/image.html                |    6 +-
 vue/docs/components/link.html                 |    6 +-
 vue/docs/components/list-group.html           |    6 +-
 vue/docs/components/loading-button.html       |    6 +-
 vue/docs/components/modal.html                |    6 +-
 vue/docs/components/navbar.html               |    6 +-
 vue/docs/components/navs-tabs.html            |    6 +-
 vue/docs/components/offcanvas.html            |    6 +-
 vue/docs/components/pagination.html           |    6 +-
 vue/docs/components/placeholder.html          |    6 +-
 vue/docs/components/popover.html              |    6 +-
 vue/docs/components/progress.html             |    6 +-
 vue/docs/components/sidebar.html              |    6 +-
 vue/docs/components/smart-pagination.html     |    6 +-
 vue/docs/components/smart-table.html          |    6 +-
 vue/docs/components/spinner.html              |    6 +-
 vue/docs/components/table.html                |    6 +-
 vue/docs/components/tabs.html                 |    6 +-
 vue/docs/components/toast.html                |    6 +-
 vue/docs/components/tooltip.html              |    6 +-
 vue/docs/components/virtual-scroller.html     |    6 +-
 vue/docs/components/widgets.html              |    6 +-
 vue/docs/customize/css-variables.html         |    6 +-
 vue/docs/customize/options.html               |    6 +-
 vue/docs/customize/sass.html                  |    6 +-
 vue/docs/forms/checkbox.html                  |    6 +-
 vue/docs/forms/checks-radios.html             |    6 +-
 vue/docs/forms/date-picker.html               |    6 +-
 vue/docs/forms/date-range-picker.html         |    6 +-
 vue/docs/forms/floating-labels.html           |    6 +-
 vue/docs/forms/form-control.html              |    6 +-
 vue/docs/forms/input-group.html               |    6 +-
 vue/docs/forms/input.html                     |    6 +-
 vue/docs/forms/layout.html                    |    6 +-
 vue/docs/forms/multi-select.html              |    6 +-
 vue/docs/forms/overview.html                  |    6 +-
 vue/docs/forms/radio.html                     |    6 +-
 vue/docs/forms/range.html                     |    6 +-
 vue/docs/forms/rating.html                    |    6 +-
 vue/docs/forms/select.html                    |    6 +-
 vue/docs/forms/switch.html                    |    6 +-
 vue/docs/forms/textarea.html                  |    6 +-
 vue/docs/forms/time-picker.html               |    6 +-
 vue/docs/forms/validation.html                |    6 +-
 vue/docs/getting-started/accessibility.html   |    6 +-
 vue/docs/getting-started/introduction.html    |    6 +-
 vue/docs/index.html                           |    6 +-
 vue/docs/layout/breakpoints.html              |    6 +-
 vue/docs/layout/columns.html                  |    6 +-
 vue/docs/layout/containers.html               |    6 +-
 vue/docs/layout/grid.html                     |    6 +-
 vue/docs/layout/gutters.html                  |    6 +-
 vue/docs/migration/v4.html                    |    6 +-
 vue/docs/migration/v5.html                    |    6 +-
 vue/docs/templates/admin-dashboard.html       |    6 +-
 vue/docs/templates/contents.html              |    6 +-
 vue/docs/templates/customize.html             |    6 +-
 vue/docs/templates/download.html              |    6 +-
 vue/docs/templates/installation.html          |    6 +-
 638 files changed, 8391 insertions(+), 8165 deletions(-)
 rename vue/docs/assets/{404.html-RliG702a.js => 404.html-DU2TjE25.js} (92%)
 create mode 100644 vue/docs/assets/CAccordion.api.html-B6uisqsk.js
 delete mode 100644 vue/docs/assets/CAccordion.api.html-BmmCbR4F.js
 create mode 100644 vue/docs/assets/CAccordionBody.api.html-BxSpa71p.js
 delete mode 100644 vue/docs/assets/CAccordionBody.api.html-DnDWpn--.js
 delete mode 100644 vue/docs/assets/CAccordionButton.api.html-BFZVkVlR.js
 create mode 100644 vue/docs/assets/CAccordionButton.api.html-DPUd2qPX.js
 delete mode 100644 vue/docs/assets/CAccordionHeader.api.html-D3E3-RrY.js
 create mode 100644 vue/docs/assets/CAccordionHeader.api.html-DhPR4UFM.js
 delete mode 100644 vue/docs/assets/CAccordionItem.api.html-B_Gvnaeq.js
 create mode 100644 vue/docs/assets/CAccordionItem.api.html-DZGPOsD9.js
 create mode 100644 vue/docs/assets/CAlert.api.html-BXIVhpa9.js
 delete mode 100644 vue/docs/assets/CAlert.api.html-BXjHGX6m.js
 create mode 100644 vue/docs/assets/CAlertHeading.api.html-BKJ9BC30.js
 delete mode 100644 vue/docs/assets/CAlertHeading.api.html-DoJskrT2.js
 delete mode 100644 vue/docs/assets/CAlertLink.api.html-Be4cejDR.js
 create mode 100644 vue/docs/assets/CAlertLink.api.html-DG0vJpCf.js
 delete mode 100644 vue/docs/assets/CAvatar.api.html-BTqEczbV.js
 create mode 100644 vue/docs/assets/CAvatar.api.html-CKyQof1f.js
 create mode 100644 vue/docs/assets/CBackdrop.api.html-BlEIpUAI.js
 delete mode 100644 vue/docs/assets/CBackdrop.api.html-DAmzayp3.js
 delete mode 100644 vue/docs/assets/CBadge.api.html-CgAts6f4.js
 create mode 100644 vue/docs/assets/CBadge.api.html-FxK3PsZy.js
 create mode 100644 vue/docs/assets/CBreadcrumb.api.html-5lgjZmeY.js
 delete mode 100644 vue/docs/assets/CBreadcrumb.api.html-DqwjKss4.js
 create mode 100644 vue/docs/assets/CBreadcrumbItem.api.html-CPH_CfEm.js
 delete mode 100644 vue/docs/assets/CBreadcrumbItem.api.html-r9RgIwJD.js
 create mode 100644 vue/docs/assets/CButton.api.html-CiQ_g2gW.js
 delete mode 100644 vue/docs/assets/CButton.api.html-ekRjLD2P.js
 create mode 100644 vue/docs/assets/CButtonGroup.api.html-BVG1ANZ_.js
 delete mode 100644 vue/docs/assets/CButtonGroup.api.html-D0mJf4Og.js
 create mode 100644 vue/docs/assets/CButtonToolbar.api.html-BLBUlnfS.js
 delete mode 100644 vue/docs/assets/CButtonToolbar.api.html-IKoND_KL.js
 create mode 100644 vue/docs/assets/CCalendar.api.html-77BmaEcE.js
 delete mode 100644 vue/docs/assets/CCalendar.api.html-C4aT9FYA.js
 delete mode 100644 vue/docs/assets/CCallout.api.html-DiF4unWf.js
 create mode 100644 vue/docs/assets/CCallout.api.html-KoizcUs-.js
 delete mode 100644 vue/docs/assets/CCard.api.html-BmbaZsmK.js
 create mode 100644 vue/docs/assets/CCard.api.html-CWzyD8X0.js
 create mode 100644 vue/docs/assets/CCardBody.api.html-BECQVBUH.js
 delete mode 100644 vue/docs/assets/CCardBody.api.html-D0-tGYrD.js
 create mode 100644 vue/docs/assets/CCardFooter.api.html-CI_3qzYg.js
 delete mode 100644 vue/docs/assets/CCardFooter.api.html-CiSjk2NS.js
 delete mode 100644 vue/docs/assets/CCardGroup.api.html-BABSBoJe.js
 create mode 100644 vue/docs/assets/CCardGroup.api.html-DH7EZxGl.js
 create mode 100644 vue/docs/assets/CCardHeader.api.html-CWFYp2G5.js
 delete mode 100644 vue/docs/assets/CCardHeader.api.html-D5ZqQVdw.js
 delete mode 100644 vue/docs/assets/CCardImage.api.html-BBnb9-GW.js
 create mode 100644 vue/docs/assets/CCardImage.api.html-CUCskHkB.js
 create mode 100644 vue/docs/assets/CCardImageOverlay.api.html-CNgKoO9s.js
 delete mode 100644 vue/docs/assets/CCardImageOverlay.api.html-TpPKznie.js
 create mode 100644 vue/docs/assets/CCardLink.api.html-Dxett-Ui.js
 delete mode 100644 vue/docs/assets/CCardLink.api.html-MlyoVRZ4.js
 delete mode 100644 vue/docs/assets/CCardSubtitle.api.html-Cl-ezx9Z.js
 create mode 100644 vue/docs/assets/CCardSubtitle.api.html-Dh4UbxxY.js
 create mode 100644 vue/docs/assets/CCardText.api.html-Bg0_JF9j.js
 delete mode 100644 vue/docs/assets/CCardText.api.html-CeB8bETl.js
 delete mode 100644 vue/docs/assets/CCardTitle.api.html-BIewfA00.js
 create mode 100644 vue/docs/assets/CCardTitle.api.html-Cvqug47a.js
 delete mode 100644 vue/docs/assets/CCarousel.api.html-B6WYH3KM.js
 create mode 100644 vue/docs/assets/CCarousel.api.html-DvQ7vBAQ.js
 delete mode 100644 vue/docs/assets/CCarouselCaption.api.html-CJ2Co3Eg.js
 create mode 100644 vue/docs/assets/CCarouselCaption.api.html-Ry9R9ID5.js
 delete mode 100644 vue/docs/assets/CCarouselItem.api.html-Bx_efOFH.js
 create mode 100644 vue/docs/assets/CCarouselItem.api.html-CQ58r3xO.js
 delete mode 100644 vue/docs/assets/CChart.api.html-BFRT-Fhg.js
 create mode 100644 vue/docs/assets/CChart.api.html-BPKhb3Ee.js
 create mode 100644 vue/docs/assets/CCloseButton.api.html-DVHA5VBo.js
 delete mode 100644 vue/docs/assets/CCloseButton.api.html-X5Fmd0Tk.js
 delete mode 100644 vue/docs/assets/CCol.api.html-DFGWxu75.js
 create mode 100644 vue/docs/assets/CCol.api.html-Fe-NnVcD.js
 create mode 100644 vue/docs/assets/CCollapse.api.html-CxTOAM8U.js
 delete mode 100644 vue/docs/assets/CCollapse.api.html-zVmsFw74.js
 delete mode 100644 vue/docs/assets/CConditionalTeleport.api.html-7PMLb_Wk.js
 create mode 100644 vue/docs/assets/CConditionalTeleport.api.html-BsPLiQQG.js
 delete mode 100644 vue/docs/assets/CContainer.api.html-CJReqk6k.js
 create mode 100644 vue/docs/assets/CContainer.api.html-O3JlICl7.js
 delete mode 100644 vue/docs/assets/CDatePicker.api.html-BmlaHdUZ.js
 create mode 100644 vue/docs/assets/CDatePicker.api.html-C1Ro8UbJ.js
 create mode 100644 vue/docs/assets/CDateRangePicker.api.html-BXCpvTjX.js
 delete mode 100644 vue/docs/assets/CDateRangePicker.api.html-Hlubmql2.js
 delete mode 100644 vue/docs/assets/CDropdown.api.html-DGIxjfQ3.js
 create mode 100644 vue/docs/assets/CDropdown.api.html-DVi36nMQ.js
 create mode 100644 vue/docs/assets/CDropdownDivider.api.html-DRPOqN6s.js
 delete mode 100644 vue/docs/assets/CDropdownDivider.api.html-VSQ_XlFl.js
 create mode 100644 vue/docs/assets/CDropdownHeader.api.html-BFaZEh4a.js
 delete mode 100644 vue/docs/assets/CDropdownHeader.api.html-Cxpz-KV-.js
 delete mode 100644 vue/docs/assets/CDropdownItem.api.html-BVulLqSR.js
 create mode 100644 vue/docs/assets/CDropdownItem.api.html-YfOt4ZPU.js
 create mode 100644 vue/docs/assets/CDropdownMenu.api.html-BOqkAy5z.js
 delete mode 100644 vue/docs/assets/CDropdownMenu.api.html-BckpImA4.js
 create mode 100644 vue/docs/assets/CDropdownToggle.api.html-TBTSZRQO.js
 delete mode 100644 vue/docs/assets/CDropdownToggle.api.html-unfICPox.js
 delete mode 100644 vue/docs/assets/CFooter.api.html-CH8Pc0Ax.js
 create mode 100644 vue/docs/assets/CFooter.api.html-DCPx9oeQ.js
 delete mode 100644 vue/docs/assets/CForm.api.html-2ixEm0A1.js
 create mode 100644 vue/docs/assets/CForm.api.html-D6NiMRuP.js
 delete mode 100644 vue/docs/assets/CFormCheck.api.html-Bf9lhFvH.js
 create mode 100644 vue/docs/assets/CFormCheck.api.html-Bl-fuUMn.js
 create mode 100644 vue/docs/assets/CFormControl.api.html-BEVjOQjL.js
 delete mode 100644 vue/docs/assets/CFormControl.api.html-D9-r3st8.js
 delete mode 100644 vue/docs/assets/CFormControlValidation.api.html-CDKpaVG3.js
 create mode 100644 vue/docs/assets/CFormControlValidation.api.html-fn-8iM1r.js
 create mode 100644 vue/docs/assets/CFormControlWrapper.api.html-BYVnVI9z.js
 delete mode 100644 vue/docs/assets/CFormControlWrapper.api.html-D75G__Lh.js
 create mode 100644 vue/docs/assets/CFormFeedback.api.html-C33zL_Pk.js
 delete mode 100644 vue/docs/assets/CFormFeedback.api.html-Cs8xHqDe.js
 delete mode 100644 vue/docs/assets/CFormFloating.api.html-C-X3BFM6.js
 create mode 100644 vue/docs/assets/CFormFloating.api.html-CqfeIH6c.js
 create mode 100644 vue/docs/assets/CFormInput.api.html-BDOLWxtk.js
 delete mode 100644 vue/docs/assets/CFormInput.api.html-CVvr0T_h.js
 create mode 100644 vue/docs/assets/CFormLabel.api.html-C3nnUCqL.js
 delete mode 100644 vue/docs/assets/CFormLabel.api.html-CpQQKu1b.js
 delete mode 100644 vue/docs/assets/CFormRange.api.html-C4Wns1Lr.js
 create mode 100644 vue/docs/assets/CFormRange.api.html-C9Fi8SJ1.js
 delete mode 100644 vue/docs/assets/CFormSelect.api.html-4dvFandI.js
 create mode 100644 vue/docs/assets/CFormSelect.api.html-Dz_dg5lQ.js
 create mode 100644 vue/docs/assets/CFormSwitch.api.html-BACw_Adx.js
 delete mode 100644 vue/docs/assets/CFormSwitch.api.html-CyrjItfh.js
 create mode 100644 vue/docs/assets/CFormText.api.html-BJqLcA9t.js
 delete mode 100644 vue/docs/assets/CFormText.api.html-CpJOPSQg.js
 create mode 100644 vue/docs/assets/CFormTextarea.api.html-C-PBE2Mw.js
 delete mode 100644 vue/docs/assets/CFormTextarea.api.html-DMhqjvWY.js
 delete mode 100644 vue/docs/assets/CHeader.api.html-CJg_IEiF.js
 create mode 100644 vue/docs/assets/CHeader.api.html-DlxZXRgK.js
 delete mode 100644 vue/docs/assets/CHeaderBrand.api.html-4A7AgRNX.js
 create mode 100644 vue/docs/assets/CHeaderBrand.api.html-CFKRvz1W.js
 delete mode 100644 vue/docs/assets/CHeaderDivider.api.html-DKNK6-VZ.js
 create mode 100644 vue/docs/assets/CHeaderDivider.api.html-WXk5c_Vn.js
 create mode 100644 vue/docs/assets/CHeaderNav.api.html-BG2UOwMu.js
 delete mode 100644 vue/docs/assets/CHeaderNav.api.html-Bbsph2xH.js
 create mode 100644 vue/docs/assets/CHeaderText.api.html-DpmaCM7o.js
 delete mode 100644 vue/docs/assets/CHeaderText.api.html-dosyBX2D.js
 create mode 100644 vue/docs/assets/CHeaderToggler.api.html-BQ00oQEl.js
 delete mode 100644 vue/docs/assets/CHeaderToggler.api.html-BlIes8qe.js
 delete mode 100644 vue/docs/assets/CIcon.api.html-B3u-PJZc.js
 create mode 100644 vue/docs/assets/CIcon.api.html-DXua_Pop.js
 create mode 100644 vue/docs/assets/CIconSvg.api.html-Bu8_TLiB.js
 delete mode 100644 vue/docs/assets/CIconSvg.api.html-DboTNlH1.js
 create mode 100644 vue/docs/assets/CImage.api.html-1rNq-hNU.js
 delete mode 100644 vue/docs/assets/CImage.api.html-C1zwuBO9.js
 delete mode 100644 vue/docs/assets/CInputGroup.api.html-B9Jacvbh.js
 create mode 100644 vue/docs/assets/CInputGroup.api.html-O1rxMtka.js
 create mode 100644 vue/docs/assets/CInputGroupText.api.html-CjjBv0Qa.js
 delete mode 100644 vue/docs/assets/CInputGroupText.api.html-nYw0lYnn.js
 delete mode 100644 vue/docs/assets/CLink.api.html-6FAjEedH.js
 create mode 100644 vue/docs/assets/CLink.api.html-CkkUHkLl.js
 create mode 100644 vue/docs/assets/CListGroup.api.html-BoJSzdjE.js
 delete mode 100644 vue/docs/assets/CListGroup.api.html-CWB2ebuP.js
 delete mode 100644 vue/docs/assets/CListGroupItem.api.html-B75RiEoP.js
 create mode 100644 vue/docs/assets/CListGroupItem.api.html-QGIAoVEf.js
 create mode 100644 vue/docs/assets/CLoadingButton.api.html-BBbFgjn5.js
 delete mode 100644 vue/docs/assets/CLoadingButton.api.html-DlKJUvsa.js
 delete mode 100644 vue/docs/assets/CModal.api.html-8P7cw-ZY.js
 create mode 100644 vue/docs/assets/CModal.api.html-CcahfjI1.js
 create mode 100644 vue/docs/assets/CModalBody.api.html-BVcd8oVP.js
 delete mode 100644 vue/docs/assets/CModalBody.api.html-CHE1pY1A.js
 create mode 100644 vue/docs/assets/CModalFooter.api.html-BOfY4tP-.js
 delete mode 100644 vue/docs/assets/CModalFooter.api.html-BsNGmVfu.js
 delete mode 100644 vue/docs/assets/CModalHeader.api.html-Dg9LwxqA.js
 create mode 100644 vue/docs/assets/CModalHeader.api.html-DoHVd2NU.js
 delete mode 100644 vue/docs/assets/CModalTitle.api.html-BBDuhOrq.js
 create mode 100644 vue/docs/assets/CModalTitle.api.html-ZPHhqxhp.js
 delete mode 100644 vue/docs/assets/CMultiSelect.api.html-B9pw_7rn.js
 create mode 100644 vue/docs/assets/CMultiSelect.api.html-DieqOVIP.js
 create mode 100644 vue/docs/assets/CMultiSelectNativeSelect.api.html-CIhoy8ZE.js
 delete mode 100644 vue/docs/assets/CMultiSelectNativeSelect.api.html-Mfuatll8.js
 delete mode 100644 vue/docs/assets/CMultiSelectOptions.api.html-DivQq4t9.js
 create mode 100644 vue/docs/assets/CMultiSelectOptions.api.html-DtAlk_Hc.js
 create mode 100644 vue/docs/assets/CMultiSelectSelection.api.html-CUdfepD8.js
 delete mode 100644 vue/docs/assets/CMultiSelectSelection.api.html-D2u4Hpu2.js
 create mode 100644 vue/docs/assets/CNav.api.html-BFqXbscE.js
 delete mode 100644 vue/docs/assets/CNav.api.html-CHflKJ-r.js
 delete mode 100644 vue/docs/assets/CNavGroup.api.html-B69rD5K0.js
 create mode 100644 vue/docs/assets/CNavGroup.api.html-CQwUJgTt.js
 create mode 100644 vue/docs/assets/CNavGroupItems.api.html-B0aFIsJL.js
 delete mode 100644 vue/docs/assets/CNavGroupItems.api.html-MzViYoW-.js
 delete mode 100644 vue/docs/assets/CNavItem.api.html-BluVGAkl.js
 create mode 100644 vue/docs/assets/CNavItem.api.html-D9aqO2xw.js
 create mode 100644 vue/docs/assets/CNavLink.api.html-2gObI4eE.js
 delete mode 100644 vue/docs/assets/CNavLink.api.html-BLbL7bWh.js
 delete mode 100644 vue/docs/assets/CNavTitle.api.html-B5pzzmsO.js
 create mode 100644 vue/docs/assets/CNavTitle.api.html-jwhtM3Ht.js
 create mode 100644 vue/docs/assets/CNavbar.api.html-Bpr_rlAN.js
 delete mode 100644 vue/docs/assets/CNavbar.api.html-D6jrKQQE.js
 delete mode 100644 vue/docs/assets/CNavbarBrand.api.html-iAKNmT2K.js
 create mode 100644 vue/docs/assets/CNavbarBrand.api.html-wHe16RAc.js
 create mode 100644 vue/docs/assets/CNavbarNav.api.html-BvIABqX_.js
 delete mode 100644 vue/docs/assets/CNavbarNav.api.html-DTmYoiRc.js
 create mode 100644 vue/docs/assets/CNavbarText.api.html-DXM-0CeX.js
 delete mode 100644 vue/docs/assets/CNavbarText.api.html-DhRgVY0Q.js
 delete mode 100644 vue/docs/assets/CNavbarToggler.api.html-BHSE5jxT.js
 create mode 100644 vue/docs/assets/CNavbarToggler.api.html-Du6cS1F2.js
 delete mode 100644 vue/docs/assets/COffcanvas.api.html--9epuLuW.js
 create mode 100644 vue/docs/assets/COffcanvas.api.html-C1yrjIbI.js
 create mode 100644 vue/docs/assets/COffcanvasBody.api.html-Cuyu4m1t.js
 delete mode 100644 vue/docs/assets/COffcanvasBody.api.html-DpuEcC8p.js
 create mode 100644 vue/docs/assets/COffcanvasHeader.api.html-C94tOX9J.js
 delete mode 100644 vue/docs/assets/COffcanvasHeader.api.html-CA3y4VF-.js
 delete mode 100644 vue/docs/assets/COffcanvasTitle.api.html-BCDNOR0i.js
 create mode 100644 vue/docs/assets/COffcanvasTitle.api.html-DWPpS-Pe.js
 create mode 100644 vue/docs/assets/CPagination.api.html-CDazWQCT.js
 delete mode 100644 vue/docs/assets/CPagination.api.html-mFhXc4Yf.js
 delete mode 100644 vue/docs/assets/CPaginationItem.api.html-Bsa5oQkt.js
 create mode 100644 vue/docs/assets/CPaginationItem.api.html-CrJi52XB.js
 delete mode 100644 vue/docs/assets/CPicker.api.html-Da5Hysn9.js
 create mode 100644 vue/docs/assets/CPicker.api.html-oSkyMXwU.js
 delete mode 100644 vue/docs/assets/CPlaceholder.api.html-CpcOzpbr.js
 create mode 100644 vue/docs/assets/CPlaceholder.api.html-TZhyRjR4.js
 create mode 100644 vue/docs/assets/CPopover.api.html-tQSUMLbj.js
 delete mode 100644 vue/docs/assets/CPopover.api.html-ymVfjSSe.js
 rename vue/docs/assets/{CProgress.api.html-C-66SSng.js => CProgress.api.html-DtBG3iso.js} (85%)
 delete mode 100644 vue/docs/assets/CProgressBar.api.html-BjA2nShz.js
 create mode 100644 vue/docs/assets/CProgressBar.api.html-DbiY29uU.js
 create mode 100644 vue/docs/assets/CProgressStacked.api.html-D0_SIwt3.js
 delete mode 100644 vue/docs/assets/CProgressStacked.api.html-iS9rdju9.js
 delete mode 100644 vue/docs/assets/CRating.api.html-CbBSuHpA.js
 create mode 100644 vue/docs/assets/CRating.api.html-c48h2dsU.js
 create mode 100644 vue/docs/assets/CRow.api.html-BfZBZHbO.js
 delete mode 100644 vue/docs/assets/CRow.api.html-CIrSW5Ga.js
 create mode 100644 vue/docs/assets/CSidebar.api.html-CTwTsKKM.js
 delete mode 100644 vue/docs/assets/CSidebar.api.html-DaxOjldv.js
 create mode 100644 vue/docs/assets/CSidebarBrand.api.html-BDwVBijp.js
 delete mode 100644 vue/docs/assets/CSidebarBrand.api.html-CMvNigzU.js
 create mode 100644 vue/docs/assets/CSidebarFooter.api.html-9MYkXiDf.js
 delete mode 100644 vue/docs/assets/CSidebarFooter.api.html-DG6rj4Di.js
 create mode 100644 vue/docs/assets/CSidebarHeader.api.html-CFlZhoRs.js
 delete mode 100644 vue/docs/assets/CSidebarHeader.api.html-UjLXre_-.js
 create mode 100644 vue/docs/assets/CSidebarNav.api.html-DPgns5YK.js
 delete mode 100644 vue/docs/assets/CSidebarNav.api.html-ZV8snc4P.js
 create mode 100644 vue/docs/assets/CSidebarToggler.api.html-CCzfHjoN.js
 delete mode 100644 vue/docs/assets/CSidebarToggler.api.html-CwaVG0LH.js
 delete mode 100644 vue/docs/assets/CSmartPagination.api.html-BikuSyAw.js
 create mode 100644 vue/docs/assets/CSmartPagination.api.html-BtDrxSb-.js
 delete mode 100644 vue/docs/assets/CSmartPagination.api.html-CrCaD_lP.js
 create mode 100644 vue/docs/assets/CSmartPagination.api.html-CtPxYRy0.js
 delete mode 100644 vue/docs/assets/CSmartTable.api.html-DBtpefqV.js
 create mode 100644 vue/docs/assets/CSmartTable.api.html-DGm1bmhO.js
 delete mode 100644 vue/docs/assets/CSmartTableBody.api.html-BnkPBl42.js
 create mode 100644 vue/docs/assets/CSmartTableBody.api.html-Ct54x_n5.js
 delete mode 100644 vue/docs/assets/CSmartTableCleaner.api.html-Ca51YF0C.js
 create mode 100644 vue/docs/assets/CSmartTableCleaner.api.html-D3V7dsv2.js
 delete mode 100644 vue/docs/assets/CSmartTableFilter.api.html-B7_1b50f.js
 create mode 100644 vue/docs/assets/CSmartTableFilter.api.html-DUCc6wnW.js
 create mode 100644 vue/docs/assets/CSmartTableHead.api.html-BObUzIwn.js
 delete mode 100644 vue/docs/assets/CSmartTableHead.api.html-DW9ZUntG.js
 create mode 100644 vue/docs/assets/CSmartTableItemsPerPageSelector.api.html-BcdEUUOn.js
 delete mode 100644 vue/docs/assets/CSmartTableItemsPerPageSelector.api.html-BqX7W_5v.js
 delete mode 100644 vue/docs/assets/CSpinner.api.html-O0NhTV-x.js
 create mode 100644 vue/docs/assets/CSpinner.api.html-tz9ud1zw.js
 create mode 100644 vue/docs/assets/CTab.api.html-C_8FIEMx.js
 delete mode 100644 vue/docs/assets/CTab.api.html-DOCKLIPZ.js
 create mode 100644 vue/docs/assets/CTabContent.api.html-1j4Vrr4K.js
 delete mode 100644 vue/docs/assets/CTabContent.api.html-C2PinBa9.js
 delete mode 100644 vue/docs/assets/CTabList.api.html-BEqv9sl7.js
 create mode 100644 vue/docs/assets/CTabList.api.html-Cmt2uvE5.js
 delete mode 100644 vue/docs/assets/CTabPane.api.html-B47A_sq6.js
 create mode 100644 vue/docs/assets/CTabPane.api.html-CNWr2MmF.js
 delete mode 100644 vue/docs/assets/CTabPanel.api.html-CZYhUIL_.js
 create mode 100644 vue/docs/assets/CTabPanel.api.html-Civ-9a5a.js
 delete mode 100644 vue/docs/assets/CTable.api.html-D0dRnCW-.js
 create mode 100644 vue/docs/assets/CTable.api.html-DNonlxhT.js
 create mode 100644 vue/docs/assets/CTableBody.api.html-BE5qkKGP.js
 delete mode 100644 vue/docs/assets/CTableBody.api.html-BFPdQqw6.js
 delete mode 100644 vue/docs/assets/CTableCaption.api.html-MTWPlJR7.js
 create mode 100644 vue/docs/assets/CTableCaption.api.html-phSXI7iF.js
 create mode 100644 vue/docs/assets/CTableDataCell.api.html-CTzr6HkH.js
 delete mode 100644 vue/docs/assets/CTableDataCell.api.html-r0s-YiAY.js
 create mode 100644 vue/docs/assets/CTableFoot.api.html-DcRu-Wur.js
 delete mode 100644 vue/docs/assets/CTableFoot.api.html-FVtyDTMQ.js
 delete mode 100644 vue/docs/assets/CTableHead.api.html-CuaSabQj.js
 create mode 100644 vue/docs/assets/CTableHead.api.html-jC7mLOK8.js
 create mode 100644 vue/docs/assets/CTableHeaderCell.api.html-BDiQC33l.js
 delete mode 100644 vue/docs/assets/CTableHeaderCell.api.html-DahKEodk.js
 create mode 100644 vue/docs/assets/CTableRow.api.html-BS0zN1Kr.js
 delete mode 100644 vue/docs/assets/CTableRow.api.html-Bh9JvciN.js
 delete mode 100644 vue/docs/assets/CTabs.api.html-BFEYxLzk.js
 create mode 100644 vue/docs/assets/CTabs.api.html-DnMHi3vy.js
 delete mode 100644 vue/docs/assets/CTimePicker.api.html-B1LPdULH.js
 create mode 100644 vue/docs/assets/CTimePicker.api.html-C_1ZXYrv.js
 create mode 100644 vue/docs/assets/CTimePickerRollCol.api.html-BP01-pLv.js
 delete mode 100644 vue/docs/assets/CTimePickerRollCol.api.html-CKuM6oLe.js
 create mode 100644 vue/docs/assets/CToast.api.html-CMbe9i1s.js
 delete mode 100644 vue/docs/assets/CToast.api.html-CrpEOCPn.js
 delete mode 100644 vue/docs/assets/CToastBody.api.html-4viEj-di.js
 create mode 100644 vue/docs/assets/CToastBody.api.html-JaBADYAu.js
 delete mode 100644 vue/docs/assets/CToastClose.api.html-D5MPMBvN.js
 create mode 100644 vue/docs/assets/CToastClose.api.html-YQ6mj1QO.js
 create mode 100644 vue/docs/assets/CToastHeader.api.html-Bb_cYC6K.js
 delete mode 100644 vue/docs/assets/CToastHeader.api.html-Bp3krdZ3.js
 delete mode 100644 vue/docs/assets/CToaster.api.html-CZ4AWR-a.js
 create mode 100644 vue/docs/assets/CToaster.api.html-DIlPMx7J.js
 create mode 100644 vue/docs/assets/CTooltip.api.html-BG1bcVkZ.js
 delete mode 100644 vue/docs/assets/CTooltip.api.html-Dd9JcsKh.js
 create mode 100644 vue/docs/assets/CVirtualScroller.api.html-CYqYd6bS.js
 delete mode 100644 vue/docs/assets/CVirtualScroller.api.html-OI5523Hm.js
 create mode 100644 vue/docs/assets/CWidgetStatsA.api.html-CQAWIPeh.js
 delete mode 100644 vue/docs/assets/CWidgetStatsA.api.html-DD_G_0XR.js
 create mode 100644 vue/docs/assets/CWidgetStatsB.api.html-8R9003Ye.js
 delete mode 100644 vue/docs/assets/CWidgetStatsB.api.html-BDmKGNGc.js
 create mode 100644 vue/docs/assets/CWidgetStatsC.api.html-BEjn1BPd.js
 delete mode 100644 vue/docs/assets/CWidgetStatsC.api.html-Ck65oxiQ.js
 delete mode 100644 vue/docs/assets/CWidgetStatsD.api.html-C6jHMRVC.js
 create mode 100644 vue/docs/assets/CWidgetStatsD.api.html-vMUwQLz_.js
 create mode 100644 vue/docs/assets/CWidgetStatsE.api.html-8FNgCETA.js
 delete mode 100644 vue/docs/assets/CWidgetStatsE.api.html-WqFr1dq3.js
 create mode 100644 vue/docs/assets/CWidgetStatsF.api.html-Bs-3Tpfk.js
 delete mode 100644 vue/docs/assets/CWidgetStatsF.api.html-DQOglbDZ.js
 rename vue/docs/assets/{Callout-BG7mA_TE.js => Callout-dZyg6Lm9.js} (83%)
 rename vue/docs/assets/{ScssDocs-BzcEAHFR.js => ScssDocs-DPTK8YLD.js} (97%)
 create mode 100644 vue/docs/assets/accessibility.html-BI4xofDT.js
 delete mode 100644 vue/docs/assets/accessibility.html-CkVUBrW4.js
 rename vue/docs/assets/{accordion.html-DPn8cCyj.js => accordion.html-1-bBbpuj.js} (87%)
 rename vue/docs/assets/{admin-dashboard.html-DU-BWvUG.js => admin-dashboard.html-CseRtZFD.js} (98%)
 create mode 100644 vue/docs/assets/alert.html-Aeh8K-Wf.js
 delete mode 100644 vue/docs/assets/alert.html-CDqS0NZ4.js
 rename vue/docs/assets/{app-BoHWg5jI.js => app-DGOUrGv-.js} (98%)
 rename vue/docs/assets/{avatar.html-CGvuFR7Q.js => avatar.html-BD-B4lfD.js} (84%)
 rename vue/docs/assets/{badge.html-BIxXbpUI.js => badge.html-Dear1jUq.js} (88%)
 rename vue/docs/assets/{breadcrumb.html-3P6FIBpg.js => breadcrumb.html-DgLYIaPr.js} (79%)
 create mode 100644 vue/docs/assets/breakpoints.html-C6u5z98e.js
 delete mode 100644 vue/docs/assets/breakpoints.html-TXDgB0cd.js
 rename vue/docs/assets/{button-group.html-DokwKiVg.js => button-group.html-7uksYI0F.js} (97%)
 rename vue/docs/assets/{button.html-Tm2d-w3G.js => button.html-D00S-NDK.js} (90%)
 create mode 100644 vue/docs/assets/calendar.html-Dj___bk9.js
 delete mode 100644 vue/docs/assets/calendar.html-aIZ63-sL.js
 rename vue/docs/assets/{callout.html-BHcngsku.js => callout.html-BvHwLp1x.js} (78%)
 rename vue/docs/assets/{card.html-CiiNUsv5.js => card.html-itUqRb0K.js} (93%)
 rename vue/docs/assets/{carousel.html-DN2cjEdX.js => carousel.html-B0BciYS9.js} (86%)
 rename vue/docs/assets/{chart.html-DY5wyS1U.js => chart.html-CeyziBqZ.js} (82%)
 rename vue/docs/assets/{checkbox.html-BL-hSbtE.js => checkbox.html-BPgHXfGt.js} (64%)
 rename vue/docs/assets/{checks-radios.html-kyGivGpt.js => checks-radios.html-CKmk8NM1.js} (85%)
 rename vue/docs/assets/{close-button.html-BS4-GrP8.js => close-button.html-blWDZBC3.js} (63%)
 create mode 100644 vue/docs/assets/collapse.html-CXLzPe5v.js
 delete mode 100644 vue/docs/assets/collapse.html-CuA1iHpy.js
 rename vue/docs/assets/{columns.html-c_8p-0J4.js => columns.html-DRAqgR3h.js} (92%)
 rename vue/docs/assets/{containers.html-DC6_LN_j.js => containers.html-DgTza5yR.js} (53%)
 create mode 100644 vue/docs/assets/contents.html-41bLmuls.js
 delete mode 100644 vue/docs/assets/contents.html-CKe33LGP.js
 create mode 100644 vue/docs/assets/css-variables.html-DBEGBYvO.js
 delete mode 100644 vue/docs/assets/css-variables.html-UJYgUBzW.js
 create mode 100644 vue/docs/assets/customize.html-C0-AGXsg.js
 delete mode 100644 vue/docs/assets/customize.html-CNlse-Z8.js
 rename vue/docs/assets/{date-picker.html-DXrgyOW0.js => date-picker.html-BHuOUNDP.js} (64%)
 rename vue/docs/assets/{date-range-picker.html-T7otEH2H.js => date-range-picker.html-Bs7ll3rY.js} (59%)
 delete mode 100644 vue/docs/assets/download.html-91eC3PyH.js
 create mode 100644 vue/docs/assets/download.html-B0ATzToD.js
 rename vue/docs/assets/{dropdown.html-D58fBbQW.js => dropdown.html-C4NgwOey.js} (88%)
 rename vue/docs/assets/{floating-labels.html-OoHunpjU.js => floating-labels.html-CCkOOAc0.js} (96%)
 rename vue/docs/assets/{footer.html-DN3ns744.js => footer.html-CSFrT_Wq.js} (63%)
 rename vue/docs/assets/{form-control.html-Dq3LSWS5.js => form-control.html-CxCiB4bb.js} (85%)
 rename vue/docs/assets/{grid.html-D9aeBmOt.js => grid.html-t8D6bS23.js} (82%)
 rename vue/docs/assets/{gutters.html-BqQUwcbR.js => gutters.html-SyYvHCgl.js} (80%)
 create mode 100644 vue/docs/assets/header.html-B_Q5U0MU.js
 delete mode 100644 vue/docs/assets/header.html-DBfVFFNJ.js
 rename vue/docs/assets/{icon.html-C2C1fAVP.js => icon.html-ivU2m4Fv.js} (99%)
 rename vue/docs/assets/{image.html-DC5HLYH1.js => image.html-G4Gptwhr.js} (85%)
 create mode 100644 vue/docs/assets/index.html-CXtJwXEn.js
 rename vue/docs/assets/{input-group.html-BD4KH7gA.js => input-group.html-DD48IpLE.js} (97%)
 rename vue/docs/assets/{input.html-BPr4o7jo.js => input.html-DQVoju7F.js} (82%)
 delete mode 100644 vue/docs/assets/installation.html-B9oaQNAO.js
 create mode 100644 vue/docs/assets/installation.html-CwOfF37v.js
 rename vue/docs/assets/{introduction.html-CuiibolQ.js => introduction.html-B-WFaD00.js} (88%)
 rename vue/docs/assets/{layout.html-DARLKo8o.js => layout.html-B1WhSZXl.js} (96%)
 rename vue/docs/assets/{link.html-C2tbxGSf.js => link.html-DgFWlsMX.js} (91%)
 rename vue/docs/assets/{list-group.html-ChBEIPwp.js => list-group.html-_udCts7M.js} (90%)
 rename vue/docs/assets/{loading-button.html-BwfYal81.js => loading-button.html-DU_pRN89.js} (83%)
 rename vue/docs/assets/{modal.html-KOyG7M6n.js => modal.html-BHtWUNx_.js} (53%)
 delete mode 100644 vue/docs/assets/multi-select.html-DP6UryqG.js
 create mode 100644 vue/docs/assets/multi-select.html-DtyKZra7.js
 rename vue/docs/assets/{navbar.html-BCzYXKko.js => navbar.html-DiQHPkAN.js} (81%)
 rename vue/docs/assets/{navs-tabs.html-BwFsuHAs.js => navs-tabs.html-R9_id4Dp.js} (75%)
 create mode 100644 vue/docs/assets/offcanvas.html-CuZ5zSJ3.js
 delete mode 100644 vue/docs/assets/offcanvas.html-D6TxFWNe.js
 rename vue/docs/assets/{options.html-B9kdngTZ.js => options.html-Oj00yCyN.js} (99%)
 rename vue/docs/assets/{overview.html-DEHhVOWL.js => overview.html-D68slxn-.js} (91%)
 rename vue/docs/assets/{pagination.html-BlNq3AJ1.js => pagination.html-B6kiDLSr.js} (85%)
 rename vue/docs/assets/{placeholder.html-BBrpG9kK.js => placeholder.html-BZpO7heW.js} (89%)
 rename vue/docs/assets/{popover.html-CcictLyq.js => popover.html-DDOrxn8Z.js} (69%)
 rename vue/docs/assets/{progress.html-DAixQyXt.js => progress.html-DhAMxmt8.js} (87%)
 rename vue/docs/assets/{radio.html-cF7KwA9W.js => radio.html-DdZZGITP.js} (70%)
 rename vue/docs/assets/{range.html-DLE7qJRM.js => range.html-DnftQdHW.js} (70%)
 rename vue/docs/assets/{rating.html-COUjsjjF.js => rating.html-DDgDjKeh.js} (87%)
 delete mode 100644 vue/docs/assets/sass.html-DHfDOQ32.js
 create mode 100644 vue/docs/assets/sass.html-QPkiTP49.js
 rename vue/docs/assets/{select.html-CGOG4_GI.js => select.html-HAuQZbve.js} (84%)
 rename vue/docs/assets/{setupDevtools-HHDGOOYC-BQImv-dR.js => setupDevtools-HHDGOOYC-8SYwYjCZ.js} (97%)
 rename vue/docs/assets/{sidebar.html-CrmBFQhh.js => sidebar.html-sk3JAtdU.js} (92%)
 rename vue/docs/assets/{smart-pagination.html-CYqfH6pM.js => smart-pagination.html-C0KPe66-.js} (66%)
 rename vue/docs/assets/{smart-table.html-DMqyM7wC.js => smart-table.html-CuXPF5Vb.js} (52%)
 rename vue/docs/assets/{spinner.html-Dja_Ea9Q.js => spinner.html-CbcVdjbB.js} (80%)
 rename vue/docs/assets/{style-CM2j93lE.css => style-V4DqbpUk.css} (99%)
 rename vue/docs/assets/{switch.html-CzcyoMGb.js => switch.html-C_xLNHwA.js} (77%)
 rename vue/docs/assets/{table.html-BKhXilE_.js => table.html-aCVCSEDl.js} (75%)
 rename vue/docs/assets/{tabs.html-BryTxUY8.js => tabs.html-BjypzLaI.js} (78%)
 rename vue/docs/assets/{textarea.html-VjAtYprD.js => textarea.html-Ck18GNEv.js} (59%)
 rename vue/docs/assets/{time-picker.html-DlV52mWV.js => time-picker.html-CvM-vSGB.js} (59%)
 rename vue/docs/assets/{toast.html-B70IM5zC.js => toast.html-DUmgmbI1.js} (70%)
 rename vue/docs/assets/{tooltip.html-D2DMDPTK.js => tooltip.html-COZMp0t7.js} (71%)
 delete mode 100644 vue/docs/assets/v4.html-Br_AIuga.js
 create mode 100644 vue/docs/assets/v4.html-qK__BZTD.js
 create mode 100644 vue/docs/assets/v5.html-Csxq3zcX.js
 delete mode 100644 vue/docs/assets/v5.html-D8yxOVYF.js
 rename vue/docs/assets/{validation.html-2QwCYaBH.js => validation.html-BZBLONBB.js} (64%)
 rename vue/docs/assets/{virtual-scroller.html-eMrz1664.js => virtual-scroller.html-se47tihX.js} (71%)
 rename vue/docs/assets/{widgets.html-CX3InA_E.js => widgets.html-DaxyknU_.js} (92%)

diff --git a/vue/docs/404.html b/vue/docs/404.html
index 5f67ac73336..59540e91c7e 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/CChart.api.html b/vue/docs/api/CChart.api.html
index 86274392552..e4214414c40 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/accordion/CAccordion.api.html b/vue/docs/api/accordion/CAccordion.api.html
index 18fd2e214d8..f22baf9f1c6 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/accordion/CAccordionBody.api.html b/vue/docs/api/accordion/CAccordionBody.api.html
index 1d0332fa163..2de600259d3 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/accordion/CAccordionButton.api.html b/vue/docs/api/accordion/CAccordionButton.api.html
index 1c59233226c..9b637c61992 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/accordion/CAccordionHeader.api.html b/vue/docs/api/accordion/CAccordionHeader.api.html
index 46d52fbbd18..fbb9a350417 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/accordion/CAccordionItem.api.html b/vue/docs/api/accordion/CAccordionItem.api.html
index 80c3d15f5e6..c7bfd7ad314 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/alert/CAlert.api.html b/vue/docs/api/alert/CAlert.api.html
index 889f91cc8cf..94b2213b0d0 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/alert/CAlertHeading.api.html b/vue/docs/api/alert/CAlertHeading.api.html
index 7950bd6e278..08dd855e292 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/alert/CAlertLink.api.html b/vue/docs/api/alert/CAlertLink.api.html
index 24aa6e7d7ef..1c06ebf6033 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/avatar/CAvatar.api.html b/vue/docs/api/avatar/CAvatar.api.html
index d7389dbd146..6aa3c1e1539 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/backdrop/CBackdrop.api.html b/vue/docs/api/backdrop/CBackdrop.api.html
index 75841bc9ba0..52f8995e330 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/badge/CBadge.api.html b/vue/docs/api/badge/CBadge.api.html
index 0b70d661473..60b93ac21f1 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/breadcrumb/CBreadcrumb.api.html b/vue/docs/api/breadcrumb/CBreadcrumb.api.html
index 5e8ee52f9e3..91714dd3fcd 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/breadcrumb/CBreadcrumbItem.api.html b/vue/docs/api/breadcrumb/CBreadcrumbItem.api.html
index 79e006a1be8..8675481800e 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.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 94e0057576d..14c6a804036 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.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 8223036b220..4efdaf96a16 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/button/CButton.api.html b/vue/docs/api/button/CButton.api.html
index f112580746f..2242dd7ef74 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/calendar/CCalendar.api.html b/vue/docs/api/calendar/CCalendar.api.html
index e6c894e7fa5..f3806d2a791 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/callout/CCallout.api.html b/vue/docs/api/callout/CCallout.api.html
index 12ec40d3bbf..3f812a66b8f 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/card/CCard.api.html b/vue/docs/api/card/CCard.api.html
index f2a5d4c0076..e75c3586409 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/card/CCardBody.api.html b/vue/docs/api/card/CCardBody.api.html
index 599e028049e..6150acdb220 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/card/CCardFooter.api.html b/vue/docs/api/card/CCardFooter.api.html
index 1378779a0ed..894e15410a9 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/card/CCardGroup.api.html b/vue/docs/api/card/CCardGroup.api.html
index f6b737c5b45..e2042485985 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/card/CCardHeader.api.html b/vue/docs/api/card/CCardHeader.api.html
index 5ebf853e3ee..db51f1a768d 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/card/CCardImage.api.html b/vue/docs/api/card/CCardImage.api.html
index e31f2f14b4b..3614548286f 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/card/CCardImageOverlay.api.html b/vue/docs/api/card/CCardImageOverlay.api.html
index 59f79f12be2..0e564f51e17 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/card/CCardLink.api.html b/vue/docs/api/card/CCardLink.api.html
index bcd3e87aa33..8b5f3cc7a0f 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/card/CCardSubtitle.api.html b/vue/docs/api/card/CCardSubtitle.api.html
index f71ced574ab..9ab719e62b2 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/card/CCardText.api.html b/vue/docs/api/card/CCardText.api.html
index a9477c4aa5a..d593cdd1b95 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/card/CCardTitle.api.html b/vue/docs/api/card/CCardTitle.api.html
index 1d470fa548f..642471574dd 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/carousel/CCarousel.api.html b/vue/docs/api/carousel/CCarousel.api.html
index 7ea1d69a866..3f6b053738d 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/carousel/CCarouselCaption.api.html b/vue/docs/api/carousel/CCarouselCaption.api.html
index 0936e6597ba..864948924b5 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/carousel/CCarouselItem.api.html b/vue/docs/api/carousel/CCarouselItem.api.html
index 3c635a3f5a1..ba0bf106f0a 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.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 a6ed4dccc88..fe1878bf197 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/collapse/CCollapse.api.html b/vue/docs/api/collapse/CCollapse.api.html
index 0c24f5c0ff6..5a58f960020 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.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 82c306d3edd..2b0cda1952d 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.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 24f67612b65..820c1e12763 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.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
index 126cc8337ed..96a516d50f0 100644
--- a/vue/docs/api/coreui-icons-vue/src/CIconSvg.api.html
+++ b/vue/docs/api/coreui-icons-vue/src/CIconSvg.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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.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 d1deefdd81a..8deb182f826 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.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 434a2f33e60..3e7ecee98c8 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/dropdown/CDropdown.api.html b/vue/docs/api/dropdown/CDropdown.api.html
index 99ffec020b7..487b09df6e2 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/dropdown/CDropdownDivider.api.html b/vue/docs/api/dropdown/CDropdownDivider.api.html
index 31ec6f52fdf..d45a476b8e2 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/dropdown/CDropdownHeader.api.html b/vue/docs/api/dropdown/CDropdownHeader.api.html
index da868675813..61b1440a3fb 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/dropdown/CDropdownItem.api.html b/vue/docs/api/dropdown/CDropdownItem.api.html
index ac93f4c5bbc..c11ebc641c8 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/dropdown/CDropdownMenu.api.html b/vue/docs/api/dropdown/CDropdownMenu.api.html
index 9634bb3b3db..207567065ad 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/dropdown/CDropdownToggle.api.html b/vue/docs/api/dropdown/CDropdownToggle.api.html
index 68c6154bfcd..b6b10a2ebf5 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/footer/CFooter.api.html b/vue/docs/api/footer/CFooter.api.html
index b778c3bd20b..5b7dc5557a2 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CForm.api.html b/vue/docs/api/form/CForm.api.html
index bad1b0af21d..ba8dba1241d 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormCheck.api.html b/vue/docs/api/form/CFormCheck.api.html
index 1f98631ad51..ccab7524e94 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormControl.api.html b/vue/docs/api/form/CFormControl.api.html
index c46f1075b35..26855b93172 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormControlValidation.api.html b/vue/docs/api/form/CFormControlValidation.api.html
index bece18ea2fd..e32bff47ec9 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormControlWrapper.api.html b/vue/docs/api/form/CFormControlWrapper.api.html
index 730d1ead09e..dade48c8d6f 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormFeedback.api.html b/vue/docs/api/form/CFormFeedback.api.html
index a488de34f69..e1e4509adfe 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormFloating.api.html b/vue/docs/api/form/CFormFloating.api.html
index 29b2c25275e..7f0994d4efa 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormInput.api.html b/vue/docs/api/form/CFormInput.api.html
index 6c8b19a3703..8e668e7f2ba 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormLabel.api.html b/vue/docs/api/form/CFormLabel.api.html
index 4ebcbf5e31e..fe4c365bb54 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormRange.api.html b/vue/docs/api/form/CFormRange.api.html
index 0fb62ff923f..3cd5acd28dd 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormSelect.api.html b/vue/docs/api/form/CFormSelect.api.html
index e010e37d052..9e58d51240c 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormSwitch.api.html b/vue/docs/api/form/CFormSwitch.api.html
index adce4b364ba..1ed3fd0b79a 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormText.api.html b/vue/docs/api/form/CFormText.api.html
index fad27ee2dd6..84516160f48 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CFormTextarea.api.html b/vue/docs/api/form/CFormTextarea.api.html
index b3bfd39cfbb..87d231045dd 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CInputGroup.api.html b/vue/docs/api/form/CInputGroup.api.html
index 7ac656ce5e9..b224d7d3ace 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/form/CInputGroupText.api.html b/vue/docs/api/form/CInputGroupText.api.html
index 9ff7348893b..424c98046a9 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/grid/CCol.api.html b/vue/docs/api/grid/CCol.api.html
index 4b1736735e4..b7290d10643 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/grid/CContainer.api.html b/vue/docs/api/grid/CContainer.api.html
index 8a552ea7114..e9a814fe300 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/grid/CRow.api.html b/vue/docs/api/grid/CRow.api.html
index a174af07d67..ab4c7383c5e 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/header/CHeader.api.html b/vue/docs/api/header/CHeader.api.html
index cb3de4d2ff8..55b3eece397 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/header/CHeaderBrand.api.html b/vue/docs/api/header/CHeaderBrand.api.html
index 9be772631f9..43787c017a4 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/header/CHeaderDivider.api.html b/vue/docs/api/header/CHeaderDivider.api.html
index 6313e57d8c4..dcfb1ca7619 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/header/CHeaderNav.api.html b/vue/docs/api/header/CHeaderNav.api.html
index 8cf3bd0c7cb..421642a9a24 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/header/CHeaderText.api.html b/vue/docs/api/header/CHeaderText.api.html
index caa6b1da1ca..b26e33b5883 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/header/CHeaderToggler.api.html b/vue/docs/api/header/CHeaderToggler.api.html
index 17a7941e3b4..70495ba67fc 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/image/CImage.api.html b/vue/docs/api/image/CImage.api.html
index dac0293336f..7749beaa32a 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/link/CLink.api.html b/vue/docs/api/link/CLink.api.html
index 07aa8cb01d5..f457568355c 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.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 168fecfb134..ebd4ed532b0 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.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 4e2d1880195..f7665e9d060 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.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 d17df359e64..8dd569499bd 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/modal/CModal.api.html b/vue/docs/api/modal/CModal.api.html
index 9c6871e519a..a471fccb3c0 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/modal/CModalBody.api.html b/vue/docs/api/modal/CModalBody.api.html
index 7110b17946f..924ff59a633 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/modal/CModalFooter.api.html b/vue/docs/api/modal/CModalFooter.api.html
index 39e890b3410..21b0dc88822 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/modal/CModalHeader.api.html b/vue/docs/api/modal/CModalHeader.api.html
index 6dc2a34a801..2e443941a64 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/modal/CModalTitle.api.html b/vue/docs/api/modal/CModalTitle.api.html
index f4d6126c837..9e8d1b8e271 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.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 82601e68bfd..0c1d99850e8 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.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 214a6916559..69b95ea253d 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.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 c539a880000..1477d5abca4 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.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 5be1807f2e1..c735dae94b1 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/nav/CNav.api.html b/vue/docs/api/nav/CNav.api.html
index 8f20e1374cf..20e657ad792 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/nav/CNavGroup.api.html b/vue/docs/api/nav/CNavGroup.api.html
index 997e41271f1..46b7a0477c3 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/nav/CNavGroupItems.api.html b/vue/docs/api/nav/CNavGroupItems.api.html
index d9193de9240..f6c48ec6419 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/nav/CNavItem.api.html b/vue/docs/api/nav/CNavItem.api.html
index c27f4bdcb9b..1cae81fa39b 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/nav/CNavLink.api.html b/vue/docs/api/nav/CNavLink.api.html
index eb7a4114608..705c00e82ee 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/nav/CNavTitle.api.html b/vue/docs/api/nav/CNavTitle.api.html
index 4fd90acecf6..5a293d2182c 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/navbar/CNavbar.api.html b/vue/docs/api/navbar/CNavbar.api.html
index 849a89f4d3c..43650384bce 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/navbar/CNavbarBrand.api.html b/vue/docs/api/navbar/CNavbarBrand.api.html
index bf5e3b89a51..9aabd3f3ce6 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/navbar/CNavbarNav.api.html b/vue/docs/api/navbar/CNavbarNav.api.html
index 8b59a046971..f6128fa1843 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/navbar/CNavbarText.api.html b/vue/docs/api/navbar/CNavbarText.api.html
index feb8147dd59..cd4d51b8343 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/navbar/CNavbarToggler.api.html b/vue/docs/api/navbar/CNavbarToggler.api.html
index b9a83522868..db4f6c5f9e7 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/offcanvas/COffcanvas.api.html b/vue/docs/api/offcanvas/COffcanvas.api.html
index 17f3615633c..8b23483bbbb 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/offcanvas/COffcanvasBody.api.html b/vue/docs/api/offcanvas/COffcanvasBody.api.html
index a297061c516..c79f836d752 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/offcanvas/COffcanvasHeader.api.html b/vue/docs/api/offcanvas/COffcanvasHeader.api.html
index 671eb719859..ed7bd4bf4f7 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/offcanvas/COffcanvasTitle.api.html b/vue/docs/api/offcanvas/COffcanvasTitle.api.html
index c524e630767..1392fca4862 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/pagination/CPagination.api.html b/vue/docs/api/pagination/CPagination.api.html
index a17a6f3ec79..1b1b590ef12 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/pagination/CPaginationItem.api.html b/vue/docs/api/pagination/CPaginationItem.api.html
index 535c78df394..f8b9ded9e7a 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/pagination/CSmartPagination.api.html b/vue/docs/api/pagination/CSmartPagination.api.html
index ea0b1192a1a..a074a6537bd 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/picker/CPicker.api.html b/vue/docs/api/picker/CPicker.api.html
index 54244eb7a04..92e6faf508b 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/placeholder/CPlaceholder.api.html b/vue/docs/api/placeholder/CPlaceholder.api.html
index acd1b654c02..4fcebf2d2cc 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/popover/CPopover.api.html b/vue/docs/api/popover/CPopover.api.html
index f2a60788266..4f239a076b1 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/progress/CProgress.api.html b/vue/docs/api/progress/CProgress.api.html
index 56ffc56bcc5..469150aa2d4 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/progress/CProgressBar.api.html b/vue/docs/api/progress/CProgressBar.api.html
index 9b112b7559f..2df047f96d5 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/progress/CProgressStacked.api.html b/vue/docs/api/progress/CProgressStacked.api.html
index c76ac74a385..6aa7a48ebb3 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/rating/CRating.api.html b/vue/docs/api/rating/CRating.api.html
index 6645cffa0cf..acd04a325df 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/sidebar/CSidebar.api.html b/vue/docs/api/sidebar/CSidebar.api.html
index 1dd159d7d2e..87604678f95 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/sidebar/CSidebarBrand.api.html b/vue/docs/api/sidebar/CSidebarBrand.api.html
index 977ba070eec..661bc3b94eb 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/sidebar/CSidebarFooter.api.html b/vue/docs/api/sidebar/CSidebarFooter.api.html
index 42be28cae34..9876a96ef3b 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/sidebar/CSidebarHeader.api.html b/vue/docs/api/sidebar/CSidebarHeader.api.html
index 7b08a2ba7b8..6756e8ef94f 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/sidebar/CSidebarNav.api.html b/vue/docs/api/sidebar/CSidebarNav.api.html
index 514d9aaf6e7..974eb225e87 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/sidebar/CSidebarToggler.api.html b/vue/docs/api/sidebar/CSidebarToggler.api.html
index a37cb5edef1..65ad6c13fcf 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.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 7bdad4bb19f..237acc3e7e2 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.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 cf416a1f3b4..8d1cca86a2e 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.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 95379cb5dcd..b4b88385ec3 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.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 af6697e8157..729c39f410d 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.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 05d39443203..f3f74c24a55 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.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 aae0d19aa44..8fe12e5fea3 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.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 c59cded9ad3..a72ffe9e8ba 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/spinner/CSpinner.api.html b/vue/docs/api/spinner/CSpinner.api.html
index 797e80e883c..d9ccb8d0615 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/table/CTable.api.html b/vue/docs/api/table/CTable.api.html
index 94adabf3b73..348a4bcb6d4 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/table/CTableBody.api.html b/vue/docs/api/table/CTableBody.api.html
index 4f5cf833e59..093a63a4c7b 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/table/CTableCaption.api.html b/vue/docs/api/table/CTableCaption.api.html
index af9476386ef..ec04b7f5573 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/table/CTableDataCell.api.html b/vue/docs/api/table/CTableDataCell.api.html
index f34bf6a37b7..6b43cbee4e8 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/table/CTableFoot.api.html b/vue/docs/api/table/CTableFoot.api.html
index eac01a1c027..f21083cd681 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/table/CTableHead.api.html b/vue/docs/api/table/CTableHead.api.html
index e62268c9155..28c7a910dc4 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/table/CTableHeaderCell.api.html b/vue/docs/api/table/CTableHeaderCell.api.html
index 9c12b00a990..5fcc9fc32e6 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/table/CTableRow.api.html b/vue/docs/api/table/CTableRow.api.html
index b5215972b78..cb51ffcde3b 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/tabs/CTab.api.html b/vue/docs/api/tabs/CTab.api.html
index 915e4bcdbe5..a88d79065ba 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/tabs/CTabContent.api.html b/vue/docs/api/tabs/CTabContent.api.html
index c94c1e0c522..52c02d7232f 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/tabs/CTabList.api.html b/vue/docs/api/tabs/CTabList.api.html
index 10a14d79e07..a175f66944f 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/tabs/CTabPane.api.html b/vue/docs/api/tabs/CTabPane.api.html
index e26ca211357..349aa6c74f4 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/tabs/CTabPanel.api.html b/vue/docs/api/tabs/CTabPanel.api.html
index ad88a1343ba..370e85a78b1 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/tabs/CTabs.api.html b/vue/docs/api/tabs/CTabs.api.html
index dcc0f170b13..6c356647545 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.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 5c8ab4cabab..f2b6494f38b 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.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 0ca76a18f91..f5e15af5aa1 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/toast/CToast.api.html b/vue/docs/api/toast/CToast.api.html
index ce2c32db535..bf287792518 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/toast/CToastBody.api.html b/vue/docs/api/toast/CToastBody.api.html
index 4c162c530ed..d8736fb76a5 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/toast/CToastClose.api.html b/vue/docs/api/toast/CToastClose.api.html
index 49353daa6ea..01e41b1a65a 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/toast/CToastHeader.api.html b/vue/docs/api/toast/CToastHeader.api.html
index 3660f55c399..07f766337ac 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/toast/CToaster.api.html b/vue/docs/api/toast/CToaster.api.html
index 7feb162d294..72d38f5bd0f 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/tooltip/CTooltip.api.html b/vue/docs/api/tooltip/CTooltip.api.html
index 9f5058ba715..33e988ff700 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.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 9397e36b928..56a015bbb5f 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/widgets/CWidgetStatsA.api.html b/vue/docs/api/widgets/CWidgetStatsA.api.html
index b67f3a82b2b..22c87dbdfde 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/widgets/CWidgetStatsB.api.html b/vue/docs/api/widgets/CWidgetStatsB.api.html
index 63086ffaeec..04a97950a5f 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/widgets/CWidgetStatsC.api.html b/vue/docs/api/widgets/CWidgetStatsC.api.html
index 169e8910bec..0c843a9156d 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/widgets/CWidgetStatsD.api.html b/vue/docs/api/widgets/CWidgetStatsD.api.html
index 7a5de608a10..b8c58f984a3 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/widgets/CWidgetStatsE.api.html b/vue/docs/api/widgets/CWidgetStatsE.api.html
index 0fbb45a25e7..164491da5e8 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/api/widgets/CWidgetStatsF.api.html b/vue/docs/api/widgets/CWidgetStatsF.api.html
index d6152a258f8..f9bcde2b3c6 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/assets/404.html-RliG702a.js b/vue/docs/assets/404.html-DU2TjE25.js
similarity index 92%
rename from vue/docs/assets/404.html-RliG702a.js
rename to vue/docs/assets/404.html-DU2TjE25.js
index 9bb521149ce..e50ae6ac8cb 100644
--- a/vue/docs/assets/404.html-RliG702a.js
+++ b/vue/docs/assets/404.html-DU2TjE25.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, e as createBaseVNode } from "./app-BoHWg5jI.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, b as createBaseVNode } from "./app-DGOUrGv-.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-B6uisqsk.js b/vue/docs/assets/CAccordion.api.html-B6uisqsk.js
new file mode 100644
index 00000000000..71a932776d8
--- /dev/null
+++ b/vue/docs/assets/CAccordion.api.html-B6uisqsk.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="caccordion" tabindex="-1">CAccordion <a class="anchor-link" href="#caccordion">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CAccordion_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CAccordion.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/accordion/CAccordion.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/accordion/CAccordion.api.html"}]]},"headers":[{"level":3,"title":"CAccordion","slug":"caccordion","link":"#caccordion","children":[]}],"filePathRelative":"api/accordion/CAccordion.api.md"}');
+export {
+  CAccordion_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CAccordion.api.html-BmmCbR4F.js b/vue/docs/assets/CAccordion.api.html-BmmCbR4F.js
deleted file mode 100644
index ea5ad0cd802..00000000000
--- a/vue/docs/assets/CAccordion.api.html-BmmCbR4F.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CAccordion_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CAccordion.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/accordion/CAccordion.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/accordion/CAccordion.api.html"}]]},"headers":[{"level":3,"title":"CAccordion","slug":"caccordion","link":"#caccordion","children":[]}],"filePathRelative":"api/accordion/CAccordion.api.md"}');
-export {
-  CAccordion_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CAccordionBody.api.html-BxSpa71p.js b/vue/docs/assets/CAccordionBody.api.html-BxSpa71p.js
new file mode 100644
index 00000000000..ae172b3887e
--- /dev/null
+++ b/vue/docs/assets/CAccordionBody.api.html-BxSpa71p.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="caccordionbody" tabindex="-1">CAccordionBody <a class="anchor-link" href="#caccordionbody">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CAccordionBody_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CAccordionBody.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/accordion/CAccordionBody.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/accordion/CAccordionBody.api.html"}]]},"headers":[{"level":3,"title":"CAccordionBody","slug":"caccordionbody","link":"#caccordionbody","children":[]}],"filePathRelative":"api/accordion/CAccordionBody.api.md"}');
+export {
+  CAccordionBody_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CAccordionBody.api.html-DnDWpn--.js b/vue/docs/assets/CAccordionBody.api.html-DnDWpn--.js
deleted file mode 100644
index 0ae89876831..00000000000
--- a/vue/docs/assets/CAccordionBody.api.html-DnDWpn--.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CAccordionBody_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CAccordionBody.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/accordion/CAccordionBody.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/accordion/CAccordionBody.api.html"}]]},"headers":[{"level":3,"title":"CAccordionBody","slug":"caccordionbody","link":"#caccordionbody","children":[]}],"filePathRelative":"api/accordion/CAccordionBody.api.md"}');
-export {
-  CAccordionBody_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CAccordionButton.api.html-BFZVkVlR.js b/vue/docs/assets/CAccordionButton.api.html-BFZVkVlR.js
deleted file mode 100644
index 6e9d46ce3f8..00000000000
--- a/vue/docs/assets/CAccordionButton.api.html-BFZVkVlR.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CAccordionButton_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CAccordionButton.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/accordion/CAccordionButton.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/accordion/CAccordionButton.api.html"}]]},"headers":[{"level":3,"title":"CAccordionButton","slug":"caccordionbutton","link":"#caccordionbutton","children":[]}],"filePathRelative":"api/accordion/CAccordionButton.api.md"}');
-export {
-  CAccordionButton_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CAccordionButton.api.html-DPUd2qPX.js b/vue/docs/assets/CAccordionButton.api.html-DPUd2qPX.js
new file mode 100644
index 00000000000..4837076b688
--- /dev/null
+++ b/vue/docs/assets/CAccordionButton.api.html-DPUd2qPX.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="caccordionbutton" tabindex="-1">CAccordionButton <a class="anchor-link" href="#caccordionbutton">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CAccordionButton_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CAccordionButton.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/accordion/CAccordionButton.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/accordion/CAccordionButton.api.html"}]]},"headers":[{"level":3,"title":"CAccordionButton","slug":"caccordionbutton","link":"#caccordionbutton","children":[]}],"filePathRelative":"api/accordion/CAccordionButton.api.md"}');
+export {
+  CAccordionButton_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CAccordionHeader.api.html-D3E3-RrY.js b/vue/docs/assets/CAccordionHeader.api.html-D3E3-RrY.js
deleted file mode 100644
index 15e2d3cb8bf..00000000000
--- a/vue/docs/assets/CAccordionHeader.api.html-D3E3-RrY.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CAccordionHeader_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CAccordionHeader.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/accordion/CAccordionHeader.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/accordion/CAccordionHeader.api.html"}]]},"headers":[{"level":3,"title":"CAccordionHeader","slug":"caccordionheader","link":"#caccordionheader","children":[]}],"filePathRelative":"api/accordion/CAccordionHeader.api.md"}');
-export {
-  CAccordionHeader_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CAccordionHeader.api.html-DhPR4UFM.js b/vue/docs/assets/CAccordionHeader.api.html-DhPR4UFM.js
new file mode 100644
index 00000000000..53c82f4be3c
--- /dev/null
+++ b/vue/docs/assets/CAccordionHeader.api.html-DhPR4UFM.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="caccordionheader" tabindex="-1">CAccordionHeader <a class="anchor-link" href="#caccordionheader">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CAccordionHeader_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CAccordionHeader.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/accordion/CAccordionHeader.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/accordion/CAccordionHeader.api.html"}]]},"headers":[{"level":3,"title":"CAccordionHeader","slug":"caccordionheader","link":"#caccordionheader","children":[]}],"filePathRelative":"api/accordion/CAccordionHeader.api.md"}');
+export {
+  CAccordionHeader_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CAccordionItem.api.html-B_Gvnaeq.js b/vue/docs/assets/CAccordionItem.api.html-B_Gvnaeq.js
deleted file mode 100644
index 3c75f25e17f..00000000000
--- a/vue/docs/assets/CAccordionItem.api.html-B_Gvnaeq.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CAccordionItem_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CAccordionItem.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/accordion/CAccordionItem.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/accordion/CAccordionItem.api.html"}]]},"headers":[{"level":3,"title":"CAccordionItem","slug":"caccordionitem","link":"#caccordionitem","children":[]}],"filePathRelative":"api/accordion/CAccordionItem.api.md"}');
-export {
-  CAccordionItem_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CAccordionItem.api.html-DZGPOsD9.js b/vue/docs/assets/CAccordionItem.api.html-DZGPOsD9.js
new file mode 100644
index 00000000000..4d27f2e1f2d
--- /dev/null
+++ b/vue/docs/assets/CAccordionItem.api.html-DZGPOsD9.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="caccordionitem" tabindex="-1">CAccordionItem <a class="anchor-link" href="#caccordionitem">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CAccordionItem_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CAccordionItem.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/accordion/CAccordionItem.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/accordion/CAccordionItem.api.html"}]]},"headers":[{"level":3,"title":"CAccordionItem","slug":"caccordionitem","link":"#caccordionitem","children":[]}],"filePathRelative":"api/accordion/CAccordionItem.api.md"}');
+export {
+  CAccordionItem_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CAlert.api.html-BXIVhpa9.js b/vue/docs/assets/CAlert.api.html-BXIVhpa9.js
new file mode 100644
index 00000000000..ce9deb39015
--- /dev/null
+++ b/vue/docs/assets/CAlert.api.html-BXIVhpa9.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="calert" tabindex="-1">CAlert <a class="anchor-link" href="#calert">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CAlert_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CAlert.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/alert/CAlert.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/alert/CAlert.api.html"}]]},"headers":[{"level":3,"title":"CAlert","slug":"calert","link":"#calert","children":[]}],"filePathRelative":"api/alert/CAlert.api.md"}');
+export {
+  CAlert_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CAlert.api.html-BXjHGX6m.js b/vue/docs/assets/CAlert.api.html-BXjHGX6m.js
deleted file mode 100644
index 42cf9df6369..00000000000
--- a/vue/docs/assets/CAlert.api.html-BXjHGX6m.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CAlert_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CAlert.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/alert/CAlert.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/alert/CAlert.api.html"}]]},"headers":[{"level":3,"title":"CAlert","slug":"calert","link":"#calert","children":[]}],"filePathRelative":"api/alert/CAlert.api.md"}');
-export {
-  CAlert_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CAlertHeading.api.html-BKJ9BC30.js b/vue/docs/assets/CAlertHeading.api.html-BKJ9BC30.js
new file mode 100644
index 00000000000..144f5a48105
--- /dev/null
+++ b/vue/docs/assets/CAlertHeading.api.html-BKJ9BC30.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="calertheading" tabindex="-1">CAlertHeading <a class="anchor-link" href="#calertheading">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CAlertHeading_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CAlertHeading.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/alert/CAlertHeading.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/alert/CAlertHeading.api.html"}]]},"headers":[{"level":3,"title":"CAlertHeading","slug":"calertheading","link":"#calertheading","children":[]}],"filePathRelative":"api/alert/CAlertHeading.api.md"}');
+export {
+  CAlertHeading_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CAlertHeading.api.html-DoJskrT2.js b/vue/docs/assets/CAlertHeading.api.html-DoJskrT2.js
deleted file mode 100644
index ad4299724c0..00000000000
--- a/vue/docs/assets/CAlertHeading.api.html-DoJskrT2.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CAlertHeading_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CAlertHeading.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/alert/CAlertHeading.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/alert/CAlertHeading.api.html"}]]},"headers":[{"level":3,"title":"CAlertHeading","slug":"calertheading","link":"#calertheading","children":[]}],"filePathRelative":"api/alert/CAlertHeading.api.md"}');
-export {
-  CAlertHeading_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CAlertLink.api.html-Be4cejDR.js b/vue/docs/assets/CAlertLink.api.html-Be4cejDR.js
deleted file mode 100644
index f303909c7dc..00000000000
--- a/vue/docs/assets/CAlertLink.api.html-Be4cejDR.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CAlertLink_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CAlertLink.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/alert/CAlertLink.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/alert/CAlertLink.api.html"}]]},"headers":[{"level":3,"title":"CAlertLink","slug":"calertlink","link":"#calertlink","children":[]}],"filePathRelative":"api/alert/CAlertLink.api.md"}');
-export {
-  CAlertLink_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CAlertLink.api.html-DG0vJpCf.js b/vue/docs/assets/CAlertLink.api.html-DG0vJpCf.js
new file mode 100644
index 00000000000..2fc557e4623
--- /dev/null
+++ b/vue/docs/assets/CAlertLink.api.html-DG0vJpCf.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="calertlink" tabindex="-1">CAlertLink <a class="anchor-link" href="#calertlink">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CAlertLink_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CAlertLink.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/alert/CAlertLink.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/alert/CAlertLink.api.html"}]]},"headers":[{"level":3,"title":"CAlertLink","slug":"calertlink","link":"#calertlink","children":[]}],"filePathRelative":"api/alert/CAlertLink.api.md"}');
+export {
+  CAlertLink_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CAvatar.api.html-BTqEczbV.js b/vue/docs/assets/CAvatar.api.html-BTqEczbV.js
deleted file mode 100644
index d3608cee543..00000000000
--- a/vue/docs/assets/CAvatar.api.html-BTqEczbV.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CAvatar_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CAvatar.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/avatar/CAvatar.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/avatar/CAvatar.api.html"}]]},"headers":[{"level":3,"title":"CAvatar","slug":"cavatar","link":"#cavatar","children":[]}],"filePathRelative":"api/avatar/CAvatar.api.md"}');
-export {
-  CAvatar_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CAvatar.api.html-CKyQof1f.js b/vue/docs/assets/CAvatar.api.html-CKyQof1f.js
new file mode 100644
index 00000000000..8deecadaf3a
--- /dev/null
+++ b/vue/docs/assets/CAvatar.api.html-CKyQof1f.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cavatar" tabindex="-1">CAvatar <a class="anchor-link" href="#cavatar">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CAvatar_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CAvatar.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/avatar/CAvatar.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/avatar/CAvatar.api.html"}]]},"headers":[{"level":3,"title":"CAvatar","slug":"cavatar","link":"#cavatar","children":[]}],"filePathRelative":"api/avatar/CAvatar.api.md"}');
+export {
+  CAvatar_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CBackdrop.api.html-BlEIpUAI.js b/vue/docs/assets/CBackdrop.api.html-BlEIpUAI.js
new file mode 100644
index 00000000000..fb847ef1ce5
--- /dev/null
+++ b/vue/docs/assets/CBackdrop.api.html-BlEIpUAI.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cbackdrop" tabindex="-1">CBackdrop <a class="anchor-link" href="#cbackdrop">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CBackdrop_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CBackdrop.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/backdrop/CBackdrop.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/backdrop/CBackdrop.api.html"}]]},"headers":[{"level":3,"title":"CBackdrop","slug":"cbackdrop","link":"#cbackdrop","children":[]}],"filePathRelative":"api/backdrop/CBackdrop.api.md"}');
+export {
+  CBackdrop_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CBackdrop.api.html-DAmzayp3.js b/vue/docs/assets/CBackdrop.api.html-DAmzayp3.js
deleted file mode 100644
index 43bf3626041..00000000000
--- a/vue/docs/assets/CBackdrop.api.html-DAmzayp3.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CBackdrop_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CBackdrop.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/backdrop/CBackdrop.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/backdrop/CBackdrop.api.html"}]]},"headers":[{"level":3,"title":"CBackdrop","slug":"cbackdrop","link":"#cbackdrop","children":[]}],"filePathRelative":"api/backdrop/CBackdrop.api.md"}');
-export {
-  CBackdrop_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CBadge.api.html-CgAts6f4.js b/vue/docs/assets/CBadge.api.html-CgAts6f4.js
deleted file mode 100644
index 98b5ebdc080..00000000000
--- a/vue/docs/assets/CBadge.api.html-CgAts6f4.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CBadge_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CBadge.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/badge/CBadge.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/badge/CBadge.api.html"}]]},"headers":[{"level":3,"title":"CBadge","slug":"cbadge","link":"#cbadge","children":[]}],"filePathRelative":"api/badge/CBadge.api.md"}');
-export {
-  CBadge_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CBadge.api.html-FxK3PsZy.js b/vue/docs/assets/CBadge.api.html-FxK3PsZy.js
new file mode 100644
index 00000000000..9955755fda2
--- /dev/null
+++ b/vue/docs/assets/CBadge.api.html-FxK3PsZy.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cbadge" tabindex="-1">CBadge <a class="anchor-link" href="#cbadge">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CBadge_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CBadge.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/badge/CBadge.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/badge/CBadge.api.html"}]]},"headers":[{"level":3,"title":"CBadge","slug":"cbadge","link":"#cbadge","children":[]}],"filePathRelative":"api/badge/CBadge.api.md"}');
+export {
+  CBadge_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CBreadcrumb.api.html-5lgjZmeY.js b/vue/docs/assets/CBreadcrumb.api.html-5lgjZmeY.js
new file mode 100644
index 00000000000..e2a0ca02fed
--- /dev/null
+++ b/vue/docs/assets/CBreadcrumb.api.html-5lgjZmeY.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cbreadcrumb" tabindex="-1">CBreadcrumb <a class="anchor-link" href="#cbreadcrumb">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CBreadcrumb_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CBreadcrumb.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/breadcrumb/CBreadcrumb.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/breadcrumb/CBreadcrumb.api.html"}]]},"headers":[{"level":3,"title":"CBreadcrumb","slug":"cbreadcrumb","link":"#cbreadcrumb","children":[]}],"filePathRelative":"api/breadcrumb/CBreadcrumb.api.md"}');
+export {
+  CBreadcrumb_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CBreadcrumb.api.html-DqwjKss4.js b/vue/docs/assets/CBreadcrumb.api.html-DqwjKss4.js
deleted file mode 100644
index df996037c94..00000000000
--- a/vue/docs/assets/CBreadcrumb.api.html-DqwjKss4.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CBreadcrumb_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CBreadcrumb.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/breadcrumb/CBreadcrumb.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/breadcrumb/CBreadcrumb.api.html"}]]},"headers":[{"level":3,"title":"CBreadcrumb","slug":"cbreadcrumb","link":"#cbreadcrumb","children":[]}],"filePathRelative":"api/breadcrumb/CBreadcrumb.api.md"}');
-export {
-  CBreadcrumb_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CBreadcrumbItem.api.html-CPH_CfEm.js b/vue/docs/assets/CBreadcrumbItem.api.html-CPH_CfEm.js
new file mode 100644
index 00000000000..16dabceeb80
--- /dev/null
+++ b/vue/docs/assets/CBreadcrumbItem.api.html-CPH_CfEm.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cbreadcrumbitem" tabindex="-1">CBreadcrumbItem <a class="anchor-link" href="#cbreadcrumbitem">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CBreadcrumbItem_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CBreadcrumbItem.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/breadcrumb/CBreadcrumbItem.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/breadcrumb/CBreadcrumbItem.api.html"}]]},"headers":[{"level":3,"title":"CBreadcrumbItem","slug":"cbreadcrumbitem","link":"#cbreadcrumbitem","children":[]}],"filePathRelative":"api/breadcrumb/CBreadcrumbItem.api.md"}');
+export {
+  CBreadcrumbItem_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CBreadcrumbItem.api.html-r9RgIwJD.js b/vue/docs/assets/CBreadcrumbItem.api.html-r9RgIwJD.js
deleted file mode 100644
index cd56aeddd1e..00000000000
--- a/vue/docs/assets/CBreadcrumbItem.api.html-r9RgIwJD.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CBreadcrumbItem_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CBreadcrumbItem.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/breadcrumb/CBreadcrumbItem.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/breadcrumb/CBreadcrumbItem.api.html"}]]},"headers":[{"level":3,"title":"CBreadcrumbItem","slug":"cbreadcrumbitem","link":"#cbreadcrumbitem","children":[]}],"filePathRelative":"api/breadcrumb/CBreadcrumbItem.api.md"}');
-export {
-  CBreadcrumbItem_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CButton.api.html-CiQ_g2gW.js b/vue/docs/assets/CButton.api.html-CiQ_g2gW.js
new file mode 100644
index 00000000000..9e73d720e19
--- /dev/null
+++ b/vue/docs/assets/CButton.api.html-CiQ_g2gW.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cbutton" tabindex="-1">CButton <a class="anchor-link" href="#cbutton">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CButton_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CButton.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/button/CButton.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/button/CButton.api.html"}]]},"headers":[{"level":3,"title":"CButton","slug":"cbutton","link":"#cbutton","children":[]}],"filePathRelative":"api/button/CButton.api.md"}');
+export {
+  CButton_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CButton.api.html-ekRjLD2P.js b/vue/docs/assets/CButton.api.html-ekRjLD2P.js
deleted file mode 100644
index 558086887ca..00000000000
--- a/vue/docs/assets/CButton.api.html-ekRjLD2P.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CButton_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CButton.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/button/CButton.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/button/CButton.api.html"}]]},"headers":[{"level":3,"title":"CButton","slug":"cbutton","link":"#cbutton","children":[]}],"filePathRelative":"api/button/CButton.api.md"}');
-export {
-  CButton_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CButtonGroup.api.html-BVG1ANZ_.js b/vue/docs/assets/CButtonGroup.api.html-BVG1ANZ_.js
new file mode 100644
index 00000000000..0fa9a67c79d
--- /dev/null
+++ b/vue/docs/assets/CButtonGroup.api.html-BVG1ANZ_.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cbuttongroup" tabindex="-1">CButtonGroup <a class="anchor-link" href="#cbuttongroup">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CButtonGroup_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CButtonGroup.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/button-group/CButtonGroup.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/button-group/CButtonGroup.api.html"}]]},"headers":[{"level":3,"title":"CButtonGroup","slug":"cbuttongroup","link":"#cbuttongroup","children":[]}],"filePathRelative":"api/button-group/CButtonGroup.api.md"}');
+export {
+  CButtonGroup_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CButtonGroup.api.html-D0mJf4Og.js b/vue/docs/assets/CButtonGroup.api.html-D0mJf4Og.js
deleted file mode 100644
index 3de720abb1f..00000000000
--- a/vue/docs/assets/CButtonGroup.api.html-D0mJf4Og.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CButtonGroup_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CButtonGroup.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/button-group/CButtonGroup.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/button-group/CButtonGroup.api.html"}]]},"headers":[{"level":3,"title":"CButtonGroup","slug":"cbuttongroup","link":"#cbuttongroup","children":[]}],"filePathRelative":"api/button-group/CButtonGroup.api.md"}');
-export {
-  CButtonGroup_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CButtonToolbar.api.html-BLBUlnfS.js b/vue/docs/assets/CButtonToolbar.api.html-BLBUlnfS.js
new file mode 100644
index 00000000000..95026ad0e7c
--- /dev/null
+++ b/vue/docs/assets/CButtonToolbar.api.html-BLBUlnfS.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cbuttontoolbar" tabindex="-1">CButtonToolbar <a class="anchor-link" href="#cbuttontoolbar">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CButtonToolbar_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CButtonToolbar.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/button-group/CButtonToolbar.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/button-group/CButtonToolbar.api.html"}]]},"headers":[{"level":3,"title":"CButtonToolbar","slug":"cbuttontoolbar","link":"#cbuttontoolbar","children":[]}],"filePathRelative":"api/button-group/CButtonToolbar.api.md"}');
+export {
+  CButtonToolbar_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CButtonToolbar.api.html-IKoND_KL.js b/vue/docs/assets/CButtonToolbar.api.html-IKoND_KL.js
deleted file mode 100644
index 92283769f12..00000000000
--- a/vue/docs/assets/CButtonToolbar.api.html-IKoND_KL.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CButtonToolbar_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CButtonToolbar.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/button-group/CButtonToolbar.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/button-group/CButtonToolbar.api.html"}]]},"headers":[{"level":3,"title":"CButtonToolbar","slug":"cbuttontoolbar","link":"#cbuttontoolbar","children":[]}],"filePathRelative":"api/button-group/CButtonToolbar.api.md"}');
-export {
-  CButtonToolbar_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CCalendar.api.html-77BmaEcE.js b/vue/docs/assets/CCalendar.api.html-77BmaEcE.js
new file mode 100644
index 00000000000..bd407672c03
--- /dev/null
+++ b/vue/docs/assets/CCalendar.api.html-77BmaEcE.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccalendar" tabindex="-1">CCalendar <a class="anchor-link" href="#ccalendar">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>aria-nav-next-month-label</strong> <br><div class="badge bg-primary">5.4.0+</div></td><td>A string that provides an accessible label for the button that navigates to the next month in the calendar. This label is read by screen readers to describe the action associated with the button.</td><td>string</td><td>-</td><td>&#39;Next month&#39;</td></tr><tr><td><strong>aria-nav-next-year-label</strong> <br><div class="badge bg-primary">5.4.0+</div></td><td>A string that provides an accessible label for the button that navigates to the next year in the calendar. This label is intended for screen readers to help users understand the button&#39;s functionality.</td><td>string</td><td>-</td><td>&#39;Next year&#39;</td></tr><tr><td><strong>aria-nav-prev-month-label</strong> <br><div class="badge bg-primary">5.4.0+</div></td><td>A string that provides an accessible label for the button that navigates to the previous month in the calendar. Screen readers will use this label to explain the purpose of the button.</td><td>string</td><td>-</td><td>&#39;Previous month&#39;</td></tr><tr><td><strong>aria-nav-prev-year-label</strong> <br><div class="badge bg-primary">5.4.0+</div></td><td>A string that provides an accessible label for the button that navigates to the previous year in the calendar. This label helps screen reader users understand the button&#39;s function.</td><td>string</td><td>-</td><td>&#39;Previous year&#39;</td></tr><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CCalendar_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCalendar.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/calendar/CCalendar.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/calendar/CCalendar.api.html"}]]},"headers":[{"level":3,"title":"CCalendar","slug":"ccalendar","link":"#ccalendar","children":[]}],"filePathRelative":"api/calendar/CCalendar.api.md"}');
+export {
+  CCalendar_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CCalendar.api.html-C4aT9FYA.js b/vue/docs/assets/CCalendar.api.html-C4aT9FYA.js
deleted file mode 100644
index 16875cce8ca..00000000000
--- a/vue/docs/assets/CCalendar.api.html-C4aT9FYA.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CCalendar_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCalendar.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/calendar/CCalendar.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/calendar/CCalendar.api.html"}]]},"headers":[{"level":3,"title":"CCalendar","slug":"ccalendar","link":"#ccalendar","children":[]}],"filePathRelative":"api/calendar/CCalendar.api.md"}');
-export {
-  CCalendar_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CCallout.api.html-DiF4unWf.js b/vue/docs/assets/CCallout.api.html-DiF4unWf.js
deleted file mode 100644
index a4a57e1be11..00000000000
--- a/vue/docs/assets/CCallout.api.html-DiF4unWf.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CCallout_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCallout.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/callout/CCallout.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/callout/CCallout.api.html"}]]},"headers":[{"level":3,"title":"CCallout","slug":"ccallout","link":"#ccallout","children":[]}],"filePathRelative":"api/callout/CCallout.api.md"}');
-export {
-  CCallout_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CCallout.api.html-KoizcUs-.js b/vue/docs/assets/CCallout.api.html-KoizcUs-.js
new file mode 100644
index 00000000000..f21b832ba36
--- /dev/null
+++ b/vue/docs/assets/CCallout.api.html-KoizcUs-.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccallout" tabindex="-1">CCallout <a class="anchor-link" href="#ccallout">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CCallout_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCallout.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/callout/CCallout.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/callout/CCallout.api.html"}]]},"headers":[{"level":3,"title":"CCallout","slug":"ccallout","link":"#ccallout","children":[]}],"filePathRelative":"api/callout/CCallout.api.md"}');
+export {
+  CCallout_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CCard.api.html-BmbaZsmK.js b/vue/docs/assets/CCard.api.html-BmbaZsmK.js
deleted file mode 100644
index b9c3bad5e76..00000000000
--- a/vue/docs/assets/CCard.api.html-BmbaZsmK.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CCard_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCard.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/card/CCard.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/card/CCard.api.html"}]]},"headers":[{"level":3,"title":"CCard","slug":"ccard","link":"#ccard","children":[]}],"filePathRelative":"api/card/CCard.api.md"}');
-export {
-  CCard_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CCard.api.html-CWzyD8X0.js b/vue/docs/assets/CCard.api.html-CWzyD8X0.js
new file mode 100644
index 00000000000..bf79fb94bb8
--- /dev/null
+++ b/vue/docs/assets/CCard.api.html-CWzyD8X0.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccard" tabindex="-1">CCard <a class="anchor-link" href="#ccard">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CCard_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCard.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/card/CCard.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/card/CCard.api.html"}]]},"headers":[{"level":3,"title":"CCard","slug":"ccard","link":"#ccard","children":[]}],"filePathRelative":"api/card/CCard.api.md"}');
+export {
+  CCard_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CCardBody.api.html-BECQVBUH.js b/vue/docs/assets/CCardBody.api.html-BECQVBUH.js
new file mode 100644
index 00000000000..9327991d578
--- /dev/null
+++ b/vue/docs/assets/CCardBody.api.html-BECQVBUH.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardbody" tabindex="-1">CCardBody <a class="anchor-link" href="#ccardbody">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CCardBody_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCardBody.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/card/CCardBody.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/card/CCardBody.api.html"}]]},"headers":[{"level":3,"title":"CCardBody","slug":"ccardbody","link":"#ccardbody","children":[]}],"filePathRelative":"api/card/CCardBody.api.md"}');
+export {
+  CCardBody_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CCardBody.api.html-D0-tGYrD.js b/vue/docs/assets/CCardBody.api.html-D0-tGYrD.js
deleted file mode 100644
index fe2578a95fa..00000000000
--- a/vue/docs/assets/CCardBody.api.html-D0-tGYrD.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CCardBody_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCardBody.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/card/CCardBody.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/card/CCardBody.api.html"}]]},"headers":[{"level":3,"title":"CCardBody","slug":"ccardbody","link":"#ccardbody","children":[]}],"filePathRelative":"api/card/CCardBody.api.md"}');
-export {
-  CCardBody_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CCardFooter.api.html-CI_3qzYg.js b/vue/docs/assets/CCardFooter.api.html-CI_3qzYg.js
new file mode 100644
index 00000000000..1618eb9f1a1
--- /dev/null
+++ b/vue/docs/assets/CCardFooter.api.html-CI_3qzYg.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardfooter" tabindex="-1">CCardFooter <a class="anchor-link" href="#ccardfooter">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CCardFooter_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCardFooter.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/card/CCardFooter.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/card/CCardFooter.api.html"}]]},"headers":[{"level":3,"title":"CCardFooter","slug":"ccardfooter","link":"#ccardfooter","children":[]}],"filePathRelative":"api/card/CCardFooter.api.md"}');
+export {
+  CCardFooter_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CCardFooter.api.html-CiSjk2NS.js b/vue/docs/assets/CCardFooter.api.html-CiSjk2NS.js
deleted file mode 100644
index 62805ce05cb..00000000000
--- a/vue/docs/assets/CCardFooter.api.html-CiSjk2NS.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CCardFooter_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCardFooter.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/card/CCardFooter.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/card/CCardFooter.api.html"}]]},"headers":[{"level":3,"title":"CCardFooter","slug":"ccardfooter","link":"#ccardfooter","children":[]}],"filePathRelative":"api/card/CCardFooter.api.md"}');
-export {
-  CCardFooter_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CCardGroup.api.html-BABSBoJe.js b/vue/docs/assets/CCardGroup.api.html-BABSBoJe.js
deleted file mode 100644
index 77abac0864d..00000000000
--- a/vue/docs/assets/CCardGroup.api.html-BABSBoJe.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CCardGroup_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCardGroup.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/card/CCardGroup.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/card/CCardGroup.api.html"}]]},"headers":[{"level":3,"title":"CCardGroup","slug":"ccardgroup","link":"#ccardgroup","children":[]}],"filePathRelative":"api/card/CCardGroup.api.md"}');
-export {
-  CCardGroup_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CCardGroup.api.html-DH7EZxGl.js b/vue/docs/assets/CCardGroup.api.html-DH7EZxGl.js
new file mode 100644
index 00000000000..49ac24ffeeb
--- /dev/null
+++ b/vue/docs/assets/CCardGroup.api.html-DH7EZxGl.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardgroup" tabindex="-1">CCardGroup <a class="anchor-link" href="#ccardgroup">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CCardGroup_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCardGroup.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/card/CCardGroup.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/card/CCardGroup.api.html"}]]},"headers":[{"level":3,"title":"CCardGroup","slug":"ccardgroup","link":"#ccardgroup","children":[]}],"filePathRelative":"api/card/CCardGroup.api.md"}');
+export {
+  CCardGroup_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CCardHeader.api.html-CWFYp2G5.js b/vue/docs/assets/CCardHeader.api.html-CWFYp2G5.js
new file mode 100644
index 00000000000..fbe86341f5c
--- /dev/null
+++ b/vue/docs/assets/CCardHeader.api.html-CWFYp2G5.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardheader" tabindex="-1">CCardHeader <a class="anchor-link" href="#ccardheader">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CCardHeader_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCardHeader.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/card/CCardHeader.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/card/CCardHeader.api.html"}]]},"headers":[{"level":3,"title":"CCardHeader","slug":"ccardheader","link":"#ccardheader","children":[]}],"filePathRelative":"api/card/CCardHeader.api.md"}');
+export {
+  CCardHeader_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CCardHeader.api.html-D5ZqQVdw.js b/vue/docs/assets/CCardHeader.api.html-D5ZqQVdw.js
deleted file mode 100644
index 54b4eaed490..00000000000
--- a/vue/docs/assets/CCardHeader.api.html-D5ZqQVdw.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CCardHeader_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCardHeader.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/card/CCardHeader.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/card/CCardHeader.api.html"}]]},"headers":[{"level":3,"title":"CCardHeader","slug":"ccardheader","link":"#ccardheader","children":[]}],"filePathRelative":"api/card/CCardHeader.api.md"}');
-export {
-  CCardHeader_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CCardImage.api.html-BBnb9-GW.js b/vue/docs/assets/CCardImage.api.html-BBnb9-GW.js
deleted file mode 100644
index 54f2c21eabf..00000000000
--- a/vue/docs/assets/CCardImage.api.html-BBnb9-GW.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CCardImage_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCardImage.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/card/CCardImage.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/card/CCardImage.api.html"}]]},"headers":[{"level":3,"title":"CCardImage","slug":"ccardimage","link":"#ccardimage","children":[]}],"filePathRelative":"api/card/CCardImage.api.md"}');
-export {
-  CCardImage_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CCardImage.api.html-CUCskHkB.js b/vue/docs/assets/CCardImage.api.html-CUCskHkB.js
new file mode 100644
index 00000000000..2551b2b5b67
--- /dev/null
+++ b/vue/docs/assets/CCardImage.api.html-CUCskHkB.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardimage" tabindex="-1">CCardImage <a class="anchor-link" href="#ccardimage">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CCardImage_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCardImage.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/card/CCardImage.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/card/CCardImage.api.html"}]]},"headers":[{"level":3,"title":"CCardImage","slug":"ccardimage","link":"#ccardimage","children":[]}],"filePathRelative":"api/card/CCardImage.api.md"}');
+export {
+  CCardImage_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CCardImageOverlay.api.html-CNgKoO9s.js b/vue/docs/assets/CCardImageOverlay.api.html-CNgKoO9s.js
new file mode 100644
index 00000000000..0349485b393
--- /dev/null
+++ b/vue/docs/assets/CCardImageOverlay.api.html-CNgKoO9s.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardimageoverlay" tabindex="-1">CCardImageOverlay <a class="anchor-link" href="#ccardimageoverlay">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CCardImageOverlay_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCardImageOverlay.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/card/CCardImageOverlay.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/card/CCardImageOverlay.api.html"}]]},"headers":[{"level":3,"title":"CCardImageOverlay","slug":"ccardimageoverlay","link":"#ccardimageoverlay","children":[]}],"filePathRelative":"api/card/CCardImageOverlay.api.md"}');
+export {
+  CCardImageOverlay_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CCardImageOverlay.api.html-TpPKznie.js b/vue/docs/assets/CCardImageOverlay.api.html-TpPKznie.js
deleted file mode 100644
index dcf897cffd6..00000000000
--- a/vue/docs/assets/CCardImageOverlay.api.html-TpPKznie.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CCardImageOverlay_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCardImageOverlay.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/card/CCardImageOverlay.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/card/CCardImageOverlay.api.html"}]]},"headers":[{"level":3,"title":"CCardImageOverlay","slug":"ccardimageoverlay","link":"#ccardimageoverlay","children":[]}],"filePathRelative":"api/card/CCardImageOverlay.api.md"}');
-export {
-  CCardImageOverlay_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CCardLink.api.html-Dxett-Ui.js b/vue/docs/assets/CCardLink.api.html-Dxett-Ui.js
new file mode 100644
index 00000000000..c41b69e15c9
--- /dev/null
+++ b/vue/docs/assets/CCardLink.api.html-Dxett-Ui.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardlink" tabindex="-1">CCardLink <a class="anchor-link" href="#ccardlink">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CCardLink_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCardLink.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/card/CCardLink.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/card/CCardLink.api.html"}]]},"headers":[{"level":3,"title":"CCardLink","slug":"ccardlink","link":"#ccardlink","children":[]}],"filePathRelative":"api/card/CCardLink.api.md"}');
+export {
+  CCardLink_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CCardLink.api.html-MlyoVRZ4.js b/vue/docs/assets/CCardLink.api.html-MlyoVRZ4.js
deleted file mode 100644
index 05d326c320d..00000000000
--- a/vue/docs/assets/CCardLink.api.html-MlyoVRZ4.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CCardLink_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCardLink.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/card/CCardLink.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/card/CCardLink.api.html"}]]},"headers":[{"level":3,"title":"CCardLink","slug":"ccardlink","link":"#ccardlink","children":[]}],"filePathRelative":"api/card/CCardLink.api.md"}');
-export {
-  CCardLink_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CCardSubtitle.api.html-Cl-ezx9Z.js b/vue/docs/assets/CCardSubtitle.api.html-Cl-ezx9Z.js
deleted file mode 100644
index a9e17957d1b..00000000000
--- a/vue/docs/assets/CCardSubtitle.api.html-Cl-ezx9Z.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CCardSubtitle_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCardSubtitle.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/card/CCardSubtitle.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/card/CCardSubtitle.api.html"}]]},"headers":[{"level":3,"title":"CCardSubtitle","slug":"ccardsubtitle","link":"#ccardsubtitle","children":[]}],"filePathRelative":"api/card/CCardSubtitle.api.md"}');
-export {
-  CCardSubtitle_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CCardSubtitle.api.html-Dh4UbxxY.js b/vue/docs/assets/CCardSubtitle.api.html-Dh4UbxxY.js
new file mode 100644
index 00000000000..c75fad6fb90
--- /dev/null
+++ b/vue/docs/assets/CCardSubtitle.api.html-Dh4UbxxY.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardsubtitle" tabindex="-1">CCardSubtitle <a class="anchor-link" href="#ccardsubtitle">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CCardSubtitle_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCardSubtitle.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/card/CCardSubtitle.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/card/CCardSubtitle.api.html"}]]},"headers":[{"level":3,"title":"CCardSubtitle","slug":"ccardsubtitle","link":"#ccardsubtitle","children":[]}],"filePathRelative":"api/card/CCardSubtitle.api.md"}');
+export {
+  CCardSubtitle_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CCardText.api.html-Bg0_JF9j.js b/vue/docs/assets/CCardText.api.html-Bg0_JF9j.js
new file mode 100644
index 00000000000..d0d68b39304
--- /dev/null
+++ b/vue/docs/assets/CCardText.api.html-Bg0_JF9j.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardtext" tabindex="-1">CCardText <a class="anchor-link" href="#ccardtext">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CCardText_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCardText.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/card/CCardText.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/card/CCardText.api.html"}]]},"headers":[{"level":3,"title":"CCardText","slug":"ccardtext","link":"#ccardtext","children":[]}],"filePathRelative":"api/card/CCardText.api.md"}');
+export {
+  CCardText_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CCardText.api.html-CeB8bETl.js b/vue/docs/assets/CCardText.api.html-CeB8bETl.js
deleted file mode 100644
index 8f0e0072fae..00000000000
--- a/vue/docs/assets/CCardText.api.html-CeB8bETl.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CCardText_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCardText.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/card/CCardText.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/card/CCardText.api.html"}]]},"headers":[{"level":3,"title":"CCardText","slug":"ccardtext","link":"#ccardtext","children":[]}],"filePathRelative":"api/card/CCardText.api.md"}');
-export {
-  CCardText_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CCardTitle.api.html-BIewfA00.js b/vue/docs/assets/CCardTitle.api.html-BIewfA00.js
deleted file mode 100644
index 82b1773efb9..00000000000
--- a/vue/docs/assets/CCardTitle.api.html-BIewfA00.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CCardTitle_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCardTitle.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/card/CCardTitle.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/card/CCardTitle.api.html"}]]},"headers":[{"level":3,"title":"CCardTitle","slug":"ccardtitle","link":"#ccardtitle","children":[]}],"filePathRelative":"api/card/CCardTitle.api.md"}');
-export {
-  CCardTitle_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CCardTitle.api.html-Cvqug47a.js b/vue/docs/assets/CCardTitle.api.html-Cvqug47a.js
new file mode 100644
index 00000000000..2ddcf246930
--- /dev/null
+++ b/vue/docs/assets/CCardTitle.api.html-Cvqug47a.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccardtitle" tabindex="-1">CCardTitle <a class="anchor-link" href="#ccardtitle">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CCardTitle_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCardTitle.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/card/CCardTitle.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/card/CCardTitle.api.html"}]]},"headers":[{"level":3,"title":"CCardTitle","slug":"ccardtitle","link":"#ccardtitle","children":[]}],"filePathRelative":"api/card/CCardTitle.api.md"}');
+export {
+  CCardTitle_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CCarousel.api.html-B6WYH3KM.js b/vue/docs/assets/CCarousel.api.html-B6WYH3KM.js
deleted file mode 100644
index c3530f7fa86..00000000000
--- a/vue/docs/assets/CCarousel.api.html-B6WYH3KM.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CCarousel_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCarousel.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/carousel/CCarousel.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/carousel/CCarousel.api.html"}]]},"headers":[{"level":3,"title":"CCarousel","slug":"ccarousel","link":"#ccarousel","children":[]}],"filePathRelative":"api/carousel/CCarousel.api.md"}');
-export {
-  CCarousel_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CCarousel.api.html-DvQ7vBAQ.js b/vue/docs/assets/CCarousel.api.html-DvQ7vBAQ.js
new file mode 100644
index 00000000000..f587fb57c02
--- /dev/null
+++ b/vue/docs/assets/CCarousel.api.html-DvQ7vBAQ.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccarousel" tabindex="-1">CCarousel <a class="anchor-link" href="#ccarousel">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CCarousel_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCarousel.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/carousel/CCarousel.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/carousel/CCarousel.api.html"}]]},"headers":[{"level":3,"title":"CCarousel","slug":"ccarousel","link":"#ccarousel","children":[]}],"filePathRelative":"api/carousel/CCarousel.api.md"}');
+export {
+  CCarousel_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CCarouselCaption.api.html-CJ2Co3Eg.js b/vue/docs/assets/CCarouselCaption.api.html-CJ2Co3Eg.js
deleted file mode 100644
index 33f96c4af15..00000000000
--- a/vue/docs/assets/CCarouselCaption.api.html-CJ2Co3Eg.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CCarouselCaption_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCarouselCaption.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/carousel/CCarouselCaption.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/carousel/CCarouselCaption.api.html"}]]},"headers":[{"level":3,"title":"CCarouselCaption","slug":"ccarouselcaption","link":"#ccarouselcaption","children":[]}],"filePathRelative":"api/carousel/CCarouselCaption.api.md"}');
-export {
-  CCarouselCaption_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CCarouselCaption.api.html-Ry9R9ID5.js b/vue/docs/assets/CCarouselCaption.api.html-Ry9R9ID5.js
new file mode 100644
index 00000000000..c546de9e60b
--- /dev/null
+++ b/vue/docs/assets/CCarouselCaption.api.html-Ry9R9ID5.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccarouselcaption" tabindex="-1">CCarouselCaption <a class="anchor-link" href="#ccarouselcaption">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CCarouselCaption_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCarouselCaption.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/carousel/CCarouselCaption.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/carousel/CCarouselCaption.api.html"}]]},"headers":[{"level":3,"title":"CCarouselCaption","slug":"ccarouselcaption","link":"#ccarouselcaption","children":[]}],"filePathRelative":"api/carousel/CCarouselCaption.api.md"}');
+export {
+  CCarouselCaption_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CCarouselItem.api.html-Bx_efOFH.js b/vue/docs/assets/CCarouselItem.api.html-Bx_efOFH.js
deleted file mode 100644
index d210d5fbd83..00000000000
--- a/vue/docs/assets/CCarouselItem.api.html-Bx_efOFH.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CCarouselItem_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCarouselItem.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/carousel/CCarouselItem.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/carousel/CCarouselItem.api.html"}]]},"headers":[{"level":3,"title":"CCarouselItem","slug":"ccarouselitem","link":"#ccarouselitem","children":[]}],"filePathRelative":"api/carousel/CCarouselItem.api.md"}');
-export {
-  CCarouselItem_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CCarouselItem.api.html-CQ58r3xO.js b/vue/docs/assets/CCarouselItem.api.html-CQ58r3xO.js
new file mode 100644
index 00000000000..45802641754
--- /dev/null
+++ b/vue/docs/assets/CCarouselItem.api.html-CQ58r3xO.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccarouselitem" tabindex="-1">CCarouselItem <a class="anchor-link" href="#ccarouselitem">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CCarouselItem_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCarouselItem.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/carousel/CCarouselItem.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/carousel/CCarouselItem.api.html"}]]},"headers":[{"level":3,"title":"CCarouselItem","slug":"ccarouselitem","link":"#ccarouselitem","children":[]}],"filePathRelative":"api/carousel/CCarouselItem.api.md"}');
+export {
+  CCarouselItem_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CChart.api.html-BFRT-Fhg.js b/vue/docs/assets/CChart.api.html-BFRT-Fhg.js
deleted file mode 100644
index d5c2bbae115..00000000000
--- a/vue/docs/assets/CChart.api.html-BFRT-Fhg.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CChart_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CChart.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/CChart.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/CChart.api.html"}]]},"headers":[{"level":3,"title":"CChart","slug":"cchart","link":"#cchart","children":[]}],"filePathRelative":"api/CChart.api.md"}');
-export {
-  CChart_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CChart.api.html-BPKhb3Ee.js b/vue/docs/assets/CChart.api.html-BPKhb3Ee.js
new file mode 100644
index 00000000000..e1df57e3f7c
--- /dev/null
+++ b/vue/docs/assets/CChart.api.html-BPKhb3Ee.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cchart" tabindex="-1">CChart <a class="anchor-link" href="#cchart">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CChart_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CChart.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/CChart.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/CChart.api.html"}]]},"headers":[{"level":3,"title":"CChart","slug":"cchart","link":"#cchart","children":[]}],"filePathRelative":"api/CChart.api.md"}');
+export {
+  CChart_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CCloseButton.api.html-DVHA5VBo.js b/vue/docs/assets/CCloseButton.api.html-DVHA5VBo.js
new file mode 100644
index 00000000000..25dc34b86a0
--- /dev/null
+++ b/vue/docs/assets/CCloseButton.api.html-DVHA5VBo.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cclosebutton" tabindex="-1">CCloseButton <a class="anchor-link" href="#cclosebutton">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CCloseButton_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCloseButton.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/close-button/CCloseButton.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/close-button/CCloseButton.api.html"}]]},"headers":[{"level":3,"title":"CCloseButton","slug":"cclosebutton","link":"#cclosebutton","children":[]}],"filePathRelative":"api/close-button/CCloseButton.api.md"}');
+export {
+  CCloseButton_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CCloseButton.api.html-X5Fmd0Tk.js b/vue/docs/assets/CCloseButton.api.html-X5Fmd0Tk.js
deleted file mode 100644
index 3ea6381e958..00000000000
--- a/vue/docs/assets/CCloseButton.api.html-X5Fmd0Tk.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CCloseButton_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCloseButton.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/close-button/CCloseButton.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/close-button/CCloseButton.api.html"}]]},"headers":[{"level":3,"title":"CCloseButton","slug":"cclosebutton","link":"#cclosebutton","children":[]}],"filePathRelative":"api/close-button/CCloseButton.api.md"}');
-export {
-  CCloseButton_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CCol.api.html-DFGWxu75.js b/vue/docs/assets/CCol.api.html-DFGWxu75.js
deleted file mode 100644
index 85d09a8b528..00000000000
--- a/vue/docs/assets/CCol.api.html-DFGWxu75.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CCol_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCol.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/grid/CCol.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/grid/CCol.api.html"}]]},"headers":[{"level":3,"title":"CCol","slug":"ccol","link":"#ccol","children":[]}],"filePathRelative":"api/grid/CCol.api.md"}');
-export {
-  CCol_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CCol.api.html-Fe-NnVcD.js b/vue/docs/assets/CCol.api.html-Fe-NnVcD.js
new file mode 100644
index 00000000000..ede7501eab1
--- /dev/null
+++ b/vue/docs/assets/CCol.api.html-Fe-NnVcD.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccol" tabindex="-1">CCol <a class="anchor-link" href="#ccol">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CCol_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCol.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/grid/CCol.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/grid/CCol.api.html"}]]},"headers":[{"level":3,"title":"CCol","slug":"ccol","link":"#ccol","children":[]}],"filePathRelative":"api/grid/CCol.api.md"}');
+export {
+  CCol_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CCollapse.api.html-CxTOAM8U.js b/vue/docs/assets/CCollapse.api.html-CxTOAM8U.js
new file mode 100644
index 00000000000..bbf580420d4
--- /dev/null
+++ b/vue/docs/assets/CCollapse.api.html-CxTOAM8U.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccollapse" tabindex="-1">CCollapse <a class="anchor-link" href="#ccollapse">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CCollapse_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCollapse.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/collapse/CCollapse.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/collapse/CCollapse.api.html"}]]},"headers":[{"level":3,"title":"CCollapse","slug":"ccollapse","link":"#ccollapse","children":[]}],"filePathRelative":"api/collapse/CCollapse.api.md"}');
+export {
+  CCollapse_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CCollapse.api.html-zVmsFw74.js b/vue/docs/assets/CCollapse.api.html-zVmsFw74.js
deleted file mode 100644
index a754cafa797..00000000000
--- a/vue/docs/assets/CCollapse.api.html-zVmsFw74.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CCollapse_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CCollapse.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/collapse/CCollapse.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/collapse/CCollapse.api.html"}]]},"headers":[{"level":3,"title":"CCollapse","slug":"ccollapse","link":"#ccollapse","children":[]}],"filePathRelative":"api/collapse/CCollapse.api.md"}');
-export {
-  CCollapse_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CConditionalTeleport.api.html-7PMLb_Wk.js b/vue/docs/assets/CConditionalTeleport.api.html-7PMLb_Wk.js
deleted file mode 100644
index 4437145edfc..00000000000
--- a/vue/docs/assets/CConditionalTeleport.api.html-7PMLb_Wk.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CConditionalTeleport_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CConditionalTeleport.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/conditional-teleport/CConditionalTeleport.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/conditional-teleport/CConditionalTeleport.api.html"}]]},"headers":[{"level":3,"title":"CConditionalTeleport","slug":"cconditionalteleport","link":"#cconditionalteleport","children":[]}],"filePathRelative":"api/conditional-teleport/CConditionalTeleport.api.md"}');
-export {
-  CConditionalTeleport_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CConditionalTeleport.api.html-BsPLiQQG.js b/vue/docs/assets/CConditionalTeleport.api.html-BsPLiQQG.js
new file mode 100644
index 00000000000..8612ff717f3
--- /dev/null
+++ b/vue/docs/assets/CConditionalTeleport.api.html-BsPLiQQG.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cconditionalteleport" tabindex="-1">CConditionalTeleport <a class="anchor-link" href="#cconditionalteleport">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">5.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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CConditionalTeleport_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CConditionalTeleport.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/conditional-teleport/CConditionalTeleport.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/conditional-teleport/CConditionalTeleport.api.html"}]]},"headers":[{"level":3,"title":"CConditionalTeleport","slug":"cconditionalteleport","link":"#cconditionalteleport","children":[]}],"filePathRelative":"api/conditional-teleport/CConditionalTeleport.api.md"}');
+export {
+  CConditionalTeleport_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CContainer.api.html-CJReqk6k.js b/vue/docs/assets/CContainer.api.html-CJReqk6k.js
deleted file mode 100644
index ed96c78a30f..00000000000
--- a/vue/docs/assets/CContainer.api.html-CJReqk6k.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CContainer_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CContainer.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/grid/CContainer.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/grid/CContainer.api.html"}]]},"headers":[{"level":3,"title":"CContainer","slug":"ccontainer","link":"#ccontainer","children":[]}],"filePathRelative":"api/grid/CContainer.api.md"}');
-export {
-  CContainer_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CContainer.api.html-O3JlICl7.js b/vue/docs/assets/CContainer.api.html-O3JlICl7.js
new file mode 100644
index 00000000000..0db0695dbbc
--- /dev/null
+++ b/vue/docs/assets/CContainer.api.html-O3JlICl7.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ccontainer" tabindex="-1">CContainer <a class="anchor-link" href="#ccontainer">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CContainer_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CContainer.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/grid/CContainer.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/grid/CContainer.api.html"}]]},"headers":[{"level":3,"title":"CContainer","slug":"ccontainer","link":"#ccontainer","children":[]}],"filePathRelative":"api/grid/CContainer.api.md"}');
+export {
+  CContainer_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CDatePicker.api.html-BmlaHdUZ.js b/vue/docs/assets/CDatePicker.api.html-BmlaHdUZ.js
deleted file mode 100644
index a55aece4abe..00000000000
--- a/vue/docs/assets/CDatePicker.api.html-BmlaHdUZ.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-C1Ro8UbJ.js b/vue/docs/assets/CDatePicker.api.html-C1Ro8UbJ.js
new file mode 100644
index 00000000000..1b49744143a
--- /dev/null
+++ b/vue/docs/assets/CDatePicker.api.html-C1Ro8UbJ.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cdatepicker" tabindex="-1">CDatePicker <a class="anchor-link" href="#cdatepicker">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>aria-nav-next-month-label</strong> <br><div class="badge bg-primary">5.4.0+</div></td><td>A string that provides an accessible label for the button that navigates to the next month in the calendar. This label is read by screen readers to describe the action associated with the button.</td><td>string</td><td>-</td><td>&#39;Next month&#39;</td></tr><tr><td><strong>aria-nav-next-year-label</strong> <br><div class="badge bg-primary">5.4.0+</div></td><td>A string that provides an accessible label for the button that navigates to the next year in the calendar. This label is intended for screen readers to help users understand the button&#39;s functionality.</td><td>string</td><td>-</td><td>&#39;Next year&#39;</td></tr><tr><td><strong>aria-nav-prev-month-label</strong> <br><div class="badge bg-primary">5.4.0+</div></td><td>A string that provides an accessible label for the button that navigates to the previous month in the calendar. Screen readers will use this label to explain the purpose of the button.</td><td>string</td><td>-</td><td>&#39;Previous month&#39;</td></tr><tr><td><strong>aria-nav-prev-year-label</strong> <br><div class="badge bg-primary">5.4.0+</div></td><td>A string that provides an accessible label for the button that navigates to the previous year in the calendar. This label helps screen reader users understand the button&#39;s function.</td><td>string</td><td>-</td><td>&#39;Previous year&#39;</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>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">#</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-BXCpvTjX.js b/vue/docs/assets/CDateRangePicker.api.html-BXCpvTjX.js
new file mode 100644
index 00000000000..427e55f761d
--- /dev/null
+++ b/vue/docs/assets/CDateRangePicker.api.html-BXCpvTjX.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cdaterangepicker" tabindex="-1">CDateRangePicker <a class="anchor-link" href="#cdaterangepicker">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>aria-nav-next-month-label</strong> <br><div class="badge bg-primary">5.4.0+</div></td><td>A string that provides an accessible label for the button that navigates to the next month in the calendar. This label is read by screen readers to describe the action associated with the button.</td><td>string</td><td>-</td><td>&#39;Next month&#39;</td></tr><tr><td><strong>aria-nav-next-year-label</strong> <br><div class="badge bg-primary">5.4.0+</div></td><td>A string that provides an accessible label for the button that navigates to the next year in the calendar. This label is intended for screen readers to help users understand the button&#39;s functionality.</td><td>string</td><td>-</td><td>&#39;Next year&#39;</td></tr><tr><td><strong>aria-nav-prev-month-label</strong> <br><div class="badge bg-primary">5.4.0+</div></td><td>A string that provides an accessible label for the button that navigates to the previous month in the calendar. Screen readers will use this label to explain the purpose of the button.</td><td>string</td><td>-</td><td>&#39;Previous month&#39;</td></tr><tr><td><strong>aria-nav-prev-year-label</strong> <br><div class="badge bg-primary">5.4.0+</div></td><td>A string that provides an accessible label for the button that navigates to the previous year in the calendar. This label helps screen reader users understand the button&#39;s function.</td><td>string</td><td>-</td><td>&#39;Previous year&#39;</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>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">#</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
deleted file mode 100644
index 3c2eda5e8d8..00000000000
--- a/vue/docs/assets/CDateRangePicker.api.html-Hlubmql2.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-DGIxjfQ3.js b/vue/docs/assets/CDropdown.api.html-DGIxjfQ3.js
deleted file mode 100644
index 16d374dfc04..00000000000
--- a/vue/docs/assets/CDropdown.api.html-DGIxjfQ3.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CDropdown_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CDropdown.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/dropdown/CDropdown.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/dropdown/CDropdown.api.html"}]]},"headers":[{"level":3,"title":"CDropdown","slug":"cdropdown","link":"#cdropdown","children":[]}],"filePathRelative":"api/dropdown/CDropdown.api.md"}');
-export {
-  CDropdown_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CDropdown.api.html-DVi36nMQ.js b/vue/docs/assets/CDropdown.api.html-DVi36nMQ.js
new file mode 100644
index 00000000000..73117b1fef6
--- /dev/null
+++ b/vue/docs/assets/CDropdown.api.html-DVi36nMQ.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cdropdown" tabindex="-1">CDropdown <a class="anchor-link" href="#cdropdown">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">5.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">5.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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CDropdown_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CDropdown.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/dropdown/CDropdown.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/dropdown/CDropdown.api.html"}]]},"headers":[{"level":3,"title":"CDropdown","slug":"cdropdown","link":"#cdropdown","children":[]}],"filePathRelative":"api/dropdown/CDropdown.api.md"}');
+export {
+  CDropdown_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CDropdownDivider.api.html-DRPOqN6s.js b/vue/docs/assets/CDropdownDivider.api.html-DRPOqN6s.js
new file mode 100644
index 00000000000..b98c6267c9a
--- /dev/null
+++ b/vue/docs/assets/CDropdownDivider.api.html-DRPOqN6s.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cdropdowndivider" tabindex="-1">CDropdownDivider <a class="anchor-link" href="#cdropdowndivider">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CDropdownDivider_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CDropdownDivider.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/dropdown/CDropdownDivider.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/dropdown/CDropdownDivider.api.html"}]]},"headers":[{"level":3,"title":"CDropdownDivider","slug":"cdropdowndivider","link":"#cdropdowndivider","children":[]}],"filePathRelative":"api/dropdown/CDropdownDivider.api.md"}');
+export {
+  CDropdownDivider_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CDropdownDivider.api.html-VSQ_XlFl.js b/vue/docs/assets/CDropdownDivider.api.html-VSQ_XlFl.js
deleted file mode 100644
index a6b25c80419..00000000000
--- a/vue/docs/assets/CDropdownDivider.api.html-VSQ_XlFl.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CDropdownDivider_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CDropdownDivider.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/dropdown/CDropdownDivider.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/dropdown/CDropdownDivider.api.html"}]]},"headers":[{"level":3,"title":"CDropdownDivider","slug":"cdropdowndivider","link":"#cdropdowndivider","children":[]}],"filePathRelative":"api/dropdown/CDropdownDivider.api.md"}');
-export {
-  CDropdownDivider_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CDropdownHeader.api.html-BFaZEh4a.js b/vue/docs/assets/CDropdownHeader.api.html-BFaZEh4a.js
new file mode 100644
index 00000000000..e5fcfc8e926
--- /dev/null
+++ b/vue/docs/assets/CDropdownHeader.api.html-BFaZEh4a.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cdropdownheader" tabindex="-1">CDropdownHeader <a class="anchor-link" href="#cdropdownheader">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CDropdownHeader_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CDropdownHeader.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/dropdown/CDropdownHeader.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/dropdown/CDropdownHeader.api.html"}]]},"headers":[{"level":3,"title":"CDropdownHeader","slug":"cdropdownheader","link":"#cdropdownheader","children":[]}],"filePathRelative":"api/dropdown/CDropdownHeader.api.md"}');
+export {
+  CDropdownHeader_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CDropdownHeader.api.html-Cxpz-KV-.js b/vue/docs/assets/CDropdownHeader.api.html-Cxpz-KV-.js
deleted file mode 100644
index a874a61efc1..00000000000
--- a/vue/docs/assets/CDropdownHeader.api.html-Cxpz-KV-.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CDropdownHeader_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CDropdownHeader.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/dropdown/CDropdownHeader.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/dropdown/CDropdownHeader.api.html"}]]},"headers":[{"level":3,"title":"CDropdownHeader","slug":"cdropdownheader","link":"#cdropdownheader","children":[]}],"filePathRelative":"api/dropdown/CDropdownHeader.api.md"}');
-export {
-  CDropdownHeader_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CDropdownItem.api.html-BVulLqSR.js b/vue/docs/assets/CDropdownItem.api.html-BVulLqSR.js
deleted file mode 100644
index 7d2f0c1f37f..00000000000
--- a/vue/docs/assets/CDropdownItem.api.html-BVulLqSR.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CDropdownItem_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CDropdownItem.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/dropdown/CDropdownItem.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/dropdown/CDropdownItem.api.html"}]]},"headers":[{"level":3,"title":"CDropdownItem","slug":"cdropdownitem","link":"#cdropdownitem","children":[]}],"filePathRelative":"api/dropdown/CDropdownItem.api.md"}');
-export {
-  CDropdownItem_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CDropdownItem.api.html-YfOt4ZPU.js b/vue/docs/assets/CDropdownItem.api.html-YfOt4ZPU.js
new file mode 100644
index 00000000000..59429787ce9
--- /dev/null
+++ b/vue/docs/assets/CDropdownItem.api.html-YfOt4ZPU.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cdropdownitem" tabindex="-1">CDropdownItem <a class="anchor-link" href="#cdropdownitem">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CDropdownItem_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CDropdownItem.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/dropdown/CDropdownItem.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/dropdown/CDropdownItem.api.html"}]]},"headers":[{"level":3,"title":"CDropdownItem","slug":"cdropdownitem","link":"#cdropdownitem","children":[]}],"filePathRelative":"api/dropdown/CDropdownItem.api.md"}');
+export {
+  CDropdownItem_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CDropdownMenu.api.html-BOqkAy5z.js b/vue/docs/assets/CDropdownMenu.api.html-BOqkAy5z.js
new file mode 100644
index 00000000000..c1b78d52e8b
--- /dev/null
+++ b/vue/docs/assets/CDropdownMenu.api.html-BOqkAy5z.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cdropdownmenu" tabindex="-1">CDropdownMenu <a class="anchor-link" href="#cdropdownmenu">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CDropdownMenu_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CDropdownMenu.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/dropdown/CDropdownMenu.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/dropdown/CDropdownMenu.api.html"}]]},"headers":[{"level":3,"title":"CDropdownMenu","slug":"cdropdownmenu","link":"#cdropdownmenu","children":[]}],"filePathRelative":"api/dropdown/CDropdownMenu.api.md"}');
+export {
+  CDropdownMenu_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CDropdownMenu.api.html-BckpImA4.js b/vue/docs/assets/CDropdownMenu.api.html-BckpImA4.js
deleted file mode 100644
index 8bae8636275..00000000000
--- a/vue/docs/assets/CDropdownMenu.api.html-BckpImA4.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CDropdownMenu_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CDropdownMenu.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/dropdown/CDropdownMenu.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/dropdown/CDropdownMenu.api.html"}]]},"headers":[{"level":3,"title":"CDropdownMenu","slug":"cdropdownmenu","link":"#cdropdownmenu","children":[]}],"filePathRelative":"api/dropdown/CDropdownMenu.api.md"}');
-export {
-  CDropdownMenu_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CDropdownToggle.api.html-TBTSZRQO.js b/vue/docs/assets/CDropdownToggle.api.html-TBTSZRQO.js
new file mode 100644
index 00000000000..5edb75fc0ac
--- /dev/null
+++ b/vue/docs/assets/CDropdownToggle.api.html-TBTSZRQO.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cdropdowntoggle" tabindex="-1">CDropdownToggle <a class="anchor-link" href="#cdropdowntoggle">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">5.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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CDropdownToggle_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CDropdownToggle.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/dropdown/CDropdownToggle.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/dropdown/CDropdownToggle.api.html"}]]},"headers":[{"level":3,"title":"CDropdownToggle","slug":"cdropdowntoggle","link":"#cdropdowntoggle","children":[]}],"filePathRelative":"api/dropdown/CDropdownToggle.api.md"}');
+export {
+  CDropdownToggle_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CDropdownToggle.api.html-unfICPox.js b/vue/docs/assets/CDropdownToggle.api.html-unfICPox.js
deleted file mode 100644
index 4835bc48569..00000000000
--- a/vue/docs/assets/CDropdownToggle.api.html-unfICPox.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CDropdownToggle_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CDropdownToggle.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/dropdown/CDropdownToggle.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/dropdown/CDropdownToggle.api.html"}]]},"headers":[{"level":3,"title":"CDropdownToggle","slug":"cdropdowntoggle","link":"#cdropdowntoggle","children":[]}],"filePathRelative":"api/dropdown/CDropdownToggle.api.md"}');
-export {
-  CDropdownToggle_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CFooter.api.html-CH8Pc0Ax.js b/vue/docs/assets/CFooter.api.html-CH8Pc0Ax.js
deleted file mode 100644
index cb9bee49f9f..00000000000
--- a/vue/docs/assets/CFooter.api.html-CH8Pc0Ax.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CFooter_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFooter.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/footer/CFooter.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/footer/CFooter.api.html"}]]},"headers":[{"level":3,"title":"CFooter","slug":"cfooter","link":"#cfooter","children":[]}],"filePathRelative":"api/footer/CFooter.api.md"}');
-export {
-  CFooter_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CFooter.api.html-DCPx9oeQ.js b/vue/docs/assets/CFooter.api.html-DCPx9oeQ.js
new file mode 100644
index 00000000000..78f513ed73e
--- /dev/null
+++ b/vue/docs/assets/CFooter.api.html-DCPx9oeQ.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cfooter" tabindex="-1">CFooter <a class="anchor-link" href="#cfooter">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CFooter_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFooter.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/footer/CFooter.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/footer/CFooter.api.html"}]]},"headers":[{"level":3,"title":"CFooter","slug":"cfooter","link":"#cfooter","children":[]}],"filePathRelative":"api/footer/CFooter.api.md"}');
+export {
+  CFooter_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CForm.api.html-2ixEm0A1.js b/vue/docs/assets/CForm.api.html-2ixEm0A1.js
deleted file mode 100644
index 10adc94a4e7..00000000000
--- a/vue/docs/assets/CForm.api.html-2ixEm0A1.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CForm_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CForm.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/form/CForm.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CForm.api.html"}]]},"headers":[{"level":3,"title":"CForm","slug":"cform","link":"#cform","children":[]}],"filePathRelative":"api/form/CForm.api.md"}');
-export {
-  CForm_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CForm.api.html-D6NiMRuP.js b/vue/docs/assets/CForm.api.html-D6NiMRuP.js
new file mode 100644
index 00000000000..bef3a8e2ec5
--- /dev/null
+++ b/vue/docs/assets/CForm.api.html-D6NiMRuP.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cform" tabindex="-1">CForm <a class="anchor-link" href="#cform">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CForm_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CForm.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/form/CForm.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CForm.api.html"}]]},"headers":[{"level":3,"title":"CForm","slug":"cform","link":"#cform","children":[]}],"filePathRelative":"api/form/CForm.api.md"}');
+export {
+  CForm_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CFormCheck.api.html-Bf9lhFvH.js b/vue/docs/assets/CFormCheck.api.html-Bf9lhFvH.js
deleted file mode 100644
index 141b90e2f07..00000000000
--- a/vue/docs/assets/CFormCheck.api.html-Bf9lhFvH.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CFormCheck_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormCheck.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/form/CFormCheck.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormCheck.api.html"}]]},"headers":[{"level":3,"title":"CFormCheck","slug":"cformcheck","link":"#cformcheck","children":[]}],"filePathRelative":"api/form/CFormCheck.api.md"}');
-export {
-  CFormCheck_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CFormCheck.api.html-Bl-fuUMn.js b/vue/docs/assets/CFormCheck.api.html-Bl-fuUMn.js
new file mode 100644
index 00000000000..ccf2475f592
--- /dev/null
+++ b/vue/docs/assets/CFormCheck.api.html-Bl-fuUMn.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformcheck" tabindex="-1">CFormCheck <a class="anchor-link" href="#cformcheck">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CFormCheck_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormCheck.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/form/CFormCheck.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormCheck.api.html"}]]},"headers":[{"level":3,"title":"CFormCheck","slug":"cformcheck","link":"#cformcheck","children":[]}],"filePathRelative":"api/form/CFormCheck.api.md"}');
+export {
+  CFormCheck_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CFormControl.api.html-BEVjOQjL.js b/vue/docs/assets/CFormControl.api.html-BEVjOQjL.js
new file mode 100644
index 00000000000..46c9355392a
--- /dev/null
+++ b/vue/docs/assets/CFormControl.api.html-BEVjOQjL.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformcontrol" tabindex="-1">CFormControl <a class="anchor-link" href="#cformcontrol">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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-D9-r3st8.js b/vue/docs/assets/CFormControl.api.html-D9-r3st8.js
deleted file mode 100644
index c85cfccfc1a..00000000000
--- a/vue/docs/assets/CFormControl.api.html-D9-r3st8.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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/CFormControlValidation.api.html-CDKpaVG3.js b/vue/docs/assets/CFormControlValidation.api.html-CDKpaVG3.js
deleted file mode 100644
index d013b3979eb..00000000000
--- a/vue/docs/assets/CFormControlValidation.api.html-CDKpaVG3.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CFormControlValidation_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormControlValidation.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/form/CFormControlValidation.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormControlValidation.api.html"}]]},"headers":[{"level":3,"title":"CFormControlValidation","slug":"cformcontrolvalidation","link":"#cformcontrolvalidation","children":[]}],"filePathRelative":"api/form/CFormControlValidation.api.md"}');
-export {
-  CFormControlValidation_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CFormControlValidation.api.html-fn-8iM1r.js b/vue/docs/assets/CFormControlValidation.api.html-fn-8iM1r.js
new file mode 100644
index 00000000000..210bb3fe692
--- /dev/null
+++ b/vue/docs/assets/CFormControlValidation.api.html-fn-8iM1r.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformcontrolvalidation" tabindex="-1">CFormControlValidation <a class="anchor-link" href="#cformcontrolvalidation">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CFormControlValidation_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormControlValidation.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/form/CFormControlValidation.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormControlValidation.api.html"}]]},"headers":[{"level":3,"title":"CFormControlValidation","slug":"cformcontrolvalidation","link":"#cformcontrolvalidation","children":[]}],"filePathRelative":"api/form/CFormControlValidation.api.md"}');
+export {
+  CFormControlValidation_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CFormControlWrapper.api.html-BYVnVI9z.js b/vue/docs/assets/CFormControlWrapper.api.html-BYVnVI9z.js
new file mode 100644
index 00000000000..c7b52637a6d
--- /dev/null
+++ b/vue/docs/assets/CFormControlWrapper.api.html-BYVnVI9z.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformcontrolwrapper" tabindex="-1">CFormControlWrapper <a class="anchor-link" href="#cformcontrolwrapper">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CFormControlWrapper_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormControlWrapper.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/form/CFormControlWrapper.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormControlWrapper.api.html"}]]},"headers":[{"level":3,"title":"CFormControlWrapper","slug":"cformcontrolwrapper","link":"#cformcontrolwrapper","children":[]}],"filePathRelative":"api/form/CFormControlWrapper.api.md"}');
+export {
+  CFormControlWrapper_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CFormControlWrapper.api.html-D75G__Lh.js b/vue/docs/assets/CFormControlWrapper.api.html-D75G__Lh.js
deleted file mode 100644
index caf2049a020..00000000000
--- a/vue/docs/assets/CFormControlWrapper.api.html-D75G__Lh.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CFormControlWrapper_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormControlWrapper.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/form/CFormControlWrapper.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormControlWrapper.api.html"}]]},"headers":[{"level":3,"title":"CFormControlWrapper","slug":"cformcontrolwrapper","link":"#cformcontrolwrapper","children":[]}],"filePathRelative":"api/form/CFormControlWrapper.api.md"}');
-export {
-  CFormControlWrapper_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CFormFeedback.api.html-C33zL_Pk.js b/vue/docs/assets/CFormFeedback.api.html-C33zL_Pk.js
new file mode 100644
index 00000000000..55046ec72ab
--- /dev/null
+++ b/vue/docs/assets/CFormFeedback.api.html-C33zL_Pk.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformfeedback" tabindex="-1">CFormFeedback <a class="anchor-link" href="#cformfeedback">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CFormFeedback_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormFeedback.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/form/CFormFeedback.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormFeedback.api.html"}]]},"headers":[{"level":3,"title":"CFormFeedback","slug":"cformfeedback","link":"#cformfeedback","children":[]}],"filePathRelative":"api/form/CFormFeedback.api.md"}');
+export {
+  CFormFeedback_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CFormFeedback.api.html-Cs8xHqDe.js b/vue/docs/assets/CFormFeedback.api.html-Cs8xHqDe.js
deleted file mode 100644
index 62d15bc2259..00000000000
--- a/vue/docs/assets/CFormFeedback.api.html-Cs8xHqDe.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CFormFeedback_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormFeedback.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/form/CFormFeedback.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormFeedback.api.html"}]]},"headers":[{"level":3,"title":"CFormFeedback","slug":"cformfeedback","link":"#cformfeedback","children":[]}],"filePathRelative":"api/form/CFormFeedback.api.md"}');
-export {
-  CFormFeedback_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CFormFloating.api.html-C-X3BFM6.js b/vue/docs/assets/CFormFloating.api.html-C-X3BFM6.js
deleted file mode 100644
index c50fa656207..00000000000
--- a/vue/docs/assets/CFormFloating.api.html-C-X3BFM6.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CFormFloating_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormFloating.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/form/CFormFloating.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormFloating.api.html"}]]},"headers":[{"level":3,"title":"CFormFloating","slug":"cformfloating","link":"#cformfloating","children":[]}],"filePathRelative":"api/form/CFormFloating.api.md"}');
-export {
-  CFormFloating_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CFormFloating.api.html-CqfeIH6c.js b/vue/docs/assets/CFormFloating.api.html-CqfeIH6c.js
new file mode 100644
index 00000000000..4a125ba1659
--- /dev/null
+++ b/vue/docs/assets/CFormFloating.api.html-CqfeIH6c.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformfloating" tabindex="-1">CFormFloating <a class="anchor-link" href="#cformfloating">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CFormFloating_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormFloating.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/form/CFormFloating.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormFloating.api.html"}]]},"headers":[{"level":3,"title":"CFormFloating","slug":"cformfloating","link":"#cformfloating","children":[]}],"filePathRelative":"api/form/CFormFloating.api.md"}');
+export {
+  CFormFloating_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CFormInput.api.html-BDOLWxtk.js b/vue/docs/assets/CFormInput.api.html-BDOLWxtk.js
new file mode 100644
index 00000000000..8f8ffa58f30
--- /dev/null
+++ b/vue/docs/assets/CFormInput.api.html-BDOLWxtk.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cforminput" tabindex="-1">CFormInput <a class="anchor-link" href="#cforminput">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CFormInput_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormInput.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/form/CFormInput.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormInput.api.html"}]]},"headers":[{"level":3,"title":"CFormInput","slug":"cforminput","link":"#cforminput","children":[]}],"filePathRelative":"api/form/CFormInput.api.md"}');
+export {
+  CFormInput_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CFormInput.api.html-CVvr0T_h.js b/vue/docs/assets/CFormInput.api.html-CVvr0T_h.js
deleted file mode 100644
index 7eaf57cdf52..00000000000
--- a/vue/docs/assets/CFormInput.api.html-CVvr0T_h.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CFormInput_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormInput.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/form/CFormInput.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormInput.api.html"}]]},"headers":[{"level":3,"title":"CFormInput","slug":"cforminput","link":"#cforminput","children":[]}],"filePathRelative":"api/form/CFormInput.api.md"}');
-export {
-  CFormInput_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CFormLabel.api.html-C3nnUCqL.js b/vue/docs/assets/CFormLabel.api.html-C3nnUCqL.js
new file mode 100644
index 00000000000..6ce44bd2984
--- /dev/null
+++ b/vue/docs/assets/CFormLabel.api.html-C3nnUCqL.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformlabel" tabindex="-1">CFormLabel <a class="anchor-link" href="#cformlabel">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CFormLabel_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormLabel.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/form/CFormLabel.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormLabel.api.html"}]]},"headers":[{"level":3,"title":"CFormLabel","slug":"cformlabel","link":"#cformlabel","children":[]}],"filePathRelative":"api/form/CFormLabel.api.md"}');
+export {
+  CFormLabel_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CFormLabel.api.html-CpQQKu1b.js b/vue/docs/assets/CFormLabel.api.html-CpQQKu1b.js
deleted file mode 100644
index 568d9a7e2b6..00000000000
--- a/vue/docs/assets/CFormLabel.api.html-CpQQKu1b.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CFormLabel_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormLabel.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/form/CFormLabel.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormLabel.api.html"}]]},"headers":[{"level":3,"title":"CFormLabel","slug":"cformlabel","link":"#cformlabel","children":[]}],"filePathRelative":"api/form/CFormLabel.api.md"}');
-export {
-  CFormLabel_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CFormRange.api.html-C4Wns1Lr.js b/vue/docs/assets/CFormRange.api.html-C4Wns1Lr.js
deleted file mode 100644
index 11eda2e6d24..00000000000
--- a/vue/docs/assets/CFormRange.api.html-C4Wns1Lr.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CFormRange_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormRange.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/form/CFormRange.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormRange.api.html"}]]},"headers":[{"level":3,"title":"CFormRange","slug":"cformrange","link":"#cformrange","children":[]}],"filePathRelative":"api/form/CFormRange.api.md"}');
-export {
-  CFormRange_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CFormRange.api.html-C9Fi8SJ1.js b/vue/docs/assets/CFormRange.api.html-C9Fi8SJ1.js
new file mode 100644
index 00000000000..b334014f57d
--- /dev/null
+++ b/vue/docs/assets/CFormRange.api.html-C9Fi8SJ1.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformrange" tabindex="-1">CFormRange <a class="anchor-link" href="#cformrange">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CFormRange_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormRange.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/form/CFormRange.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormRange.api.html"}]]},"headers":[{"level":3,"title":"CFormRange","slug":"cformrange","link":"#cformrange","children":[]}],"filePathRelative":"api/form/CFormRange.api.md"}');
+export {
+  CFormRange_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CFormSelect.api.html-4dvFandI.js b/vue/docs/assets/CFormSelect.api.html-4dvFandI.js
deleted file mode 100644
index 6eea7d099c4..00000000000
--- a/vue/docs/assets/CFormSelect.api.html-4dvFandI.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CFormSelect_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormSelect.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/form/CFormSelect.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormSelect.api.html"}]]},"headers":[{"level":3,"title":"CFormSelect","slug":"cformselect","link":"#cformselect","children":[]}],"filePathRelative":"api/form/CFormSelect.api.md"}');
-export {
-  CFormSelect_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CFormSelect.api.html-Dz_dg5lQ.js b/vue/docs/assets/CFormSelect.api.html-Dz_dg5lQ.js
new file mode 100644
index 00000000000..a2d4b75db78
--- /dev/null
+++ b/vue/docs/assets/CFormSelect.api.html-Dz_dg5lQ.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformselect" tabindex="-1">CFormSelect <a class="anchor-link" href="#cformselect">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CFormSelect_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormSelect.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/form/CFormSelect.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormSelect.api.html"}]]},"headers":[{"level":3,"title":"CFormSelect","slug":"cformselect","link":"#cformselect","children":[]}],"filePathRelative":"api/form/CFormSelect.api.md"}');
+export {
+  CFormSelect_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CFormSwitch.api.html-BACw_Adx.js b/vue/docs/assets/CFormSwitch.api.html-BACw_Adx.js
new file mode 100644
index 00000000000..16b967e3df4
--- /dev/null
+++ b/vue/docs/assets/CFormSwitch.api.html-BACw_Adx.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformswitch" tabindex="-1">CFormSwitch <a class="anchor-link" href="#cformswitch">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CFormSwitch_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormSwitch.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/form/CFormSwitch.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormSwitch.api.html"}]]},"headers":[{"level":3,"title":"CFormSwitch","slug":"cformswitch","link":"#cformswitch","children":[]}],"filePathRelative":"api/form/CFormSwitch.api.md"}');
+export {
+  CFormSwitch_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CFormSwitch.api.html-CyrjItfh.js b/vue/docs/assets/CFormSwitch.api.html-CyrjItfh.js
deleted file mode 100644
index 736e5b53ab2..00000000000
--- a/vue/docs/assets/CFormSwitch.api.html-CyrjItfh.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CFormSwitch_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormSwitch.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/form/CFormSwitch.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormSwitch.api.html"}]]},"headers":[{"level":3,"title":"CFormSwitch","slug":"cformswitch","link":"#cformswitch","children":[]}],"filePathRelative":"api/form/CFormSwitch.api.md"}');
-export {
-  CFormSwitch_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CFormText.api.html-BJqLcA9t.js b/vue/docs/assets/CFormText.api.html-BJqLcA9t.js
new file mode 100644
index 00000000000..4a99665256c
--- /dev/null
+++ b/vue/docs/assets/CFormText.api.html-BJqLcA9t.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformtext" tabindex="-1">CFormText <a class="anchor-link" href="#cformtext">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CFormText_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormText.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/form/CFormText.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormText.api.html"}]]},"headers":[{"level":3,"title":"CFormText","slug":"cformtext","link":"#cformtext","children":[]}],"filePathRelative":"api/form/CFormText.api.md"}');
+export {
+  CFormText_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CFormText.api.html-CpJOPSQg.js b/vue/docs/assets/CFormText.api.html-CpJOPSQg.js
deleted file mode 100644
index 62e99260c9c..00000000000
--- a/vue/docs/assets/CFormText.api.html-CpJOPSQg.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CFormText_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormText.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/form/CFormText.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormText.api.html"}]]},"headers":[{"level":3,"title":"CFormText","slug":"cformtext","link":"#cformtext","children":[]}],"filePathRelative":"api/form/CFormText.api.md"}');
-export {
-  CFormText_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CFormTextarea.api.html-C-PBE2Mw.js b/vue/docs/assets/CFormTextarea.api.html-C-PBE2Mw.js
new file mode 100644
index 00000000000..a0752bc7bdb
--- /dev/null
+++ b/vue/docs/assets/CFormTextarea.api.html-C-PBE2Mw.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cformtextarea" tabindex="-1">CFormTextarea <a class="anchor-link" href="#cformtextarea">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CFormTextarea_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormTextarea.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/form/CFormTextarea.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormTextarea.api.html"}]]},"headers":[{"level":3,"title":"CFormTextarea","slug":"cformtextarea","link":"#cformtextarea","children":[]}],"filePathRelative":"api/form/CFormTextarea.api.md"}');
+export {
+  CFormTextarea_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CFormTextarea.api.html-DMhqjvWY.js b/vue/docs/assets/CFormTextarea.api.html-DMhqjvWY.js
deleted file mode 100644
index 6208c83e7f9..00000000000
--- a/vue/docs/assets/CFormTextarea.api.html-DMhqjvWY.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CFormTextarea_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CFormTextarea.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/form/CFormTextarea.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CFormTextarea.api.html"}]]},"headers":[{"level":3,"title":"CFormTextarea","slug":"cformtextarea","link":"#cformtextarea","children":[]}],"filePathRelative":"api/form/CFormTextarea.api.md"}');
-export {
-  CFormTextarea_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CHeader.api.html-CJg_IEiF.js b/vue/docs/assets/CHeader.api.html-CJg_IEiF.js
deleted file mode 100644
index ca11cdff4e2..00000000000
--- a/vue/docs/assets/CHeader.api.html-CJg_IEiF.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CHeader_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CHeader.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/header/CHeader.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/header/CHeader.api.html"}]]},"headers":[{"level":3,"title":"CHeader","slug":"cheader","link":"#cheader","children":[]}],"filePathRelative":"api/header/CHeader.api.md"}');
-export {
-  CHeader_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CHeader.api.html-DlxZXRgK.js b/vue/docs/assets/CHeader.api.html-DlxZXRgK.js
new file mode 100644
index 00000000000..2649365af16
--- /dev/null
+++ b/vue/docs/assets/CHeader.api.html-DlxZXRgK.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cheader" tabindex="-1">CHeader <a class="anchor-link" href="#cheader">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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>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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CHeader_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CHeader.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/header/CHeader.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/header/CHeader.api.html"}]]},"headers":[{"level":3,"title":"CHeader","slug":"cheader","link":"#cheader","children":[]}],"filePathRelative":"api/header/CHeader.api.md"}');
+export {
+  CHeader_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CHeaderBrand.api.html-4A7AgRNX.js b/vue/docs/assets/CHeaderBrand.api.html-4A7AgRNX.js
deleted file mode 100644
index 0d5b61bedc9..00000000000
--- a/vue/docs/assets/CHeaderBrand.api.html-4A7AgRNX.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CHeaderBrand_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CHeaderBrand.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/header/CHeaderBrand.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/header/CHeaderBrand.api.html"}]]},"headers":[{"level":3,"title":"CHeaderBrand","slug":"cheaderbrand","link":"#cheaderbrand","children":[]}],"filePathRelative":"api/header/CHeaderBrand.api.md"}');
-export {
-  CHeaderBrand_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CHeaderBrand.api.html-CFKRvz1W.js b/vue/docs/assets/CHeaderBrand.api.html-CFKRvz1W.js
new file mode 100644
index 00000000000..d2ffafccd8c
--- /dev/null
+++ b/vue/docs/assets/CHeaderBrand.api.html-CFKRvz1W.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cheaderbrand" tabindex="-1">CHeaderBrand <a class="anchor-link" href="#cheaderbrand">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CHeaderBrand_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CHeaderBrand.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/header/CHeaderBrand.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/header/CHeaderBrand.api.html"}]]},"headers":[{"level":3,"title":"CHeaderBrand","slug":"cheaderbrand","link":"#cheaderbrand","children":[]}],"filePathRelative":"api/header/CHeaderBrand.api.md"}');
+export {
+  CHeaderBrand_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CHeaderDivider.api.html-DKNK6-VZ.js b/vue/docs/assets/CHeaderDivider.api.html-DKNK6-VZ.js
deleted file mode 100644
index 478d352ac1f..00000000000
--- a/vue/docs/assets/CHeaderDivider.api.html-DKNK6-VZ.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CHeaderDivider_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CHeaderDivider.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/header/CHeaderDivider.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/header/CHeaderDivider.api.html"}]]},"headers":[{"level":3,"title":"CHeaderDivider","slug":"cheaderdivider","link":"#cheaderdivider","children":[]}],"filePathRelative":"api/header/CHeaderDivider.api.md"}');
-export {
-  CHeaderDivider_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CHeaderDivider.api.html-WXk5c_Vn.js b/vue/docs/assets/CHeaderDivider.api.html-WXk5c_Vn.js
new file mode 100644
index 00000000000..15634e67136
--- /dev/null
+++ b/vue/docs/assets/CHeaderDivider.api.html-WXk5c_Vn.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cheaderdivider" tabindex="-1">CHeaderDivider <a class="anchor-link" href="#cheaderdivider">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CHeaderDivider_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CHeaderDivider.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/header/CHeaderDivider.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/header/CHeaderDivider.api.html"}]]},"headers":[{"level":3,"title":"CHeaderDivider","slug":"cheaderdivider","link":"#cheaderdivider","children":[]}],"filePathRelative":"api/header/CHeaderDivider.api.md"}');
+export {
+  CHeaderDivider_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CHeaderNav.api.html-BG2UOwMu.js b/vue/docs/assets/CHeaderNav.api.html-BG2UOwMu.js
new file mode 100644
index 00000000000..6a73ebaa1c7
--- /dev/null
+++ b/vue/docs/assets/CHeaderNav.api.html-BG2UOwMu.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cheadernav" tabindex="-1">CHeaderNav <a class="anchor-link" href="#cheadernav">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CHeaderNav_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CHeaderNav.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/header/CHeaderNav.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/header/CHeaderNav.api.html"}]]},"headers":[{"level":3,"title":"CHeaderNav","slug":"cheadernav","link":"#cheadernav","children":[]}],"filePathRelative":"api/header/CHeaderNav.api.md"}');
+export {
+  CHeaderNav_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CHeaderNav.api.html-Bbsph2xH.js b/vue/docs/assets/CHeaderNav.api.html-Bbsph2xH.js
deleted file mode 100644
index 4ab74694af9..00000000000
--- a/vue/docs/assets/CHeaderNav.api.html-Bbsph2xH.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CHeaderNav_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CHeaderNav.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/header/CHeaderNav.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/header/CHeaderNav.api.html"}]]},"headers":[{"level":3,"title":"CHeaderNav","slug":"cheadernav","link":"#cheadernav","children":[]}],"filePathRelative":"api/header/CHeaderNav.api.md"}');
-export {
-  CHeaderNav_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CHeaderText.api.html-DpmaCM7o.js b/vue/docs/assets/CHeaderText.api.html-DpmaCM7o.js
new file mode 100644
index 00000000000..0f27d99a288
--- /dev/null
+++ b/vue/docs/assets/CHeaderText.api.html-DpmaCM7o.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cheadertext" tabindex="-1">CHeaderText <a class="anchor-link" href="#cheadertext">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CHeaderText_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CHeaderText.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/header/CHeaderText.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/header/CHeaderText.api.html"}]]},"headers":[{"level":3,"title":"CHeaderText","slug":"cheadertext","link":"#cheadertext","children":[]}],"filePathRelative":"api/header/CHeaderText.api.md"}');
+export {
+  CHeaderText_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CHeaderText.api.html-dosyBX2D.js b/vue/docs/assets/CHeaderText.api.html-dosyBX2D.js
deleted file mode 100644
index 6c12e529d76..00000000000
--- a/vue/docs/assets/CHeaderText.api.html-dosyBX2D.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CHeaderText_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CHeaderText.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/header/CHeaderText.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/header/CHeaderText.api.html"}]]},"headers":[{"level":3,"title":"CHeaderText","slug":"cheadertext","link":"#cheadertext","children":[]}],"filePathRelative":"api/header/CHeaderText.api.md"}');
-export {
-  CHeaderText_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CHeaderToggler.api.html-BQ00oQEl.js b/vue/docs/assets/CHeaderToggler.api.html-BQ00oQEl.js
new file mode 100644
index 00000000000..a69119040ea
--- /dev/null
+++ b/vue/docs/assets/CHeaderToggler.api.html-BQ00oQEl.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cheadertoggler" tabindex="-1">CHeaderToggler <a class="anchor-link" href="#cheadertoggler">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CHeaderToggler_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CHeaderToggler.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/header/CHeaderToggler.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/header/CHeaderToggler.api.html"}]]},"headers":[{"level":3,"title":"CHeaderToggler","slug":"cheadertoggler","link":"#cheadertoggler","children":[]}],"filePathRelative":"api/header/CHeaderToggler.api.md"}');
+export {
+  CHeaderToggler_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CHeaderToggler.api.html-BlIes8qe.js b/vue/docs/assets/CHeaderToggler.api.html-BlIes8qe.js
deleted file mode 100644
index 5229ef3af65..00000000000
--- a/vue/docs/assets/CHeaderToggler.api.html-BlIes8qe.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CHeaderToggler_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CHeaderToggler.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/header/CHeaderToggler.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/header/CHeaderToggler.api.html"}]]},"headers":[{"level":3,"title":"CHeaderToggler","slug":"cheadertoggler","link":"#cheadertoggler","children":[]}],"filePathRelative":"api/header/CHeaderToggler.api.md"}');
-export {
-  CHeaderToggler_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CIcon.api.html-B3u-PJZc.js b/vue/docs/assets/CIcon.api.html-B3u-PJZc.js
deleted file mode 100644
index d06b0505c3f..00000000000
--- a/vue/docs/assets/CIcon.api.html-B3u-PJZc.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CIcon_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CIcon.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/coreui-icons-vue/src/CIcon.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/coreui-icons-vue/src/CIcon.api.html"}]]},"headers":[{"level":3,"title":"CIcon","slug":"cicon","link":"#cicon","children":[]}],"filePathRelative":"api/coreui-icons-vue/src/CIcon.api.md"}');
-export {
-  CIcon_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CIcon.api.html-DXua_Pop.js b/vue/docs/assets/CIcon.api.html-DXua_Pop.js
new file mode 100644
index 00000000000..df1ed10fa15
--- /dev/null
+++ b/vue/docs/assets/CIcon.api.html-DXua_Pop.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cicon" tabindex="-1">CIcon <a class="anchor-link" href="#cicon">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CIcon_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CIcon.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/coreui-icons-vue/src/CIcon.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/coreui-icons-vue/src/CIcon.api.html"}]]},"headers":[{"level":3,"title":"CIcon","slug":"cicon","link":"#cicon","children":[]}],"filePathRelative":"api/coreui-icons-vue/src/CIcon.api.md"}');
+export {
+  CIcon_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CIconSvg.api.html-Bu8_TLiB.js b/vue/docs/assets/CIconSvg.api.html-Bu8_TLiB.js
new file mode 100644
index 00000000000..ce0166185d2
--- /dev/null
+++ b/vue/docs/assets/CIconSvg.api.html-Bu8_TLiB.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ciconsvg" tabindex="-1">CIconSvg <a class="anchor-link" href="#ciconsvg">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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/CIconSvg.api.html-DboTNlH1.js b/vue/docs/assets/CIconSvg.api.html-DboTNlH1.js
deleted file mode 100644
index 4378294d44a..00000000000
--- a/vue/docs/assets/CIconSvg.api.html-DboTNlH1.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-1rNq-hNU.js b/vue/docs/assets/CImage.api.html-1rNq-hNU.js
new file mode 100644
index 00000000000..361c7f166ce
--- /dev/null
+++ b/vue/docs/assets/CImage.api.html-1rNq-hNU.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cimage" tabindex="-1">CImage <a class="anchor-link" href="#cimage">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CImage_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CImage.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/image/CImage.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/image/CImage.api.html"}]]},"headers":[{"level":3,"title":"CImage","slug":"cimage","link":"#cimage","children":[]}],"filePathRelative":"api/image/CImage.api.md"}');
+export {
+  CImage_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CImage.api.html-C1zwuBO9.js b/vue/docs/assets/CImage.api.html-C1zwuBO9.js
deleted file mode 100644
index eef37fa7226..00000000000
--- a/vue/docs/assets/CImage.api.html-C1zwuBO9.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CImage_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CImage.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/image/CImage.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/image/CImage.api.html"}]]},"headers":[{"level":3,"title":"CImage","slug":"cimage","link":"#cimage","children":[]}],"filePathRelative":"api/image/CImage.api.md"}');
-export {
-  CImage_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CInputGroup.api.html-B9Jacvbh.js b/vue/docs/assets/CInputGroup.api.html-B9Jacvbh.js
deleted file mode 100644
index 81de88e3124..00000000000
--- a/vue/docs/assets/CInputGroup.api.html-B9Jacvbh.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CInputGroup_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CInputGroup.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/form/CInputGroup.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CInputGroup.api.html"}]]},"headers":[{"level":3,"title":"CInputGroup","slug":"cinputgroup","link":"#cinputgroup","children":[]}],"filePathRelative":"api/form/CInputGroup.api.md"}');
-export {
-  CInputGroup_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CInputGroup.api.html-O1rxMtka.js b/vue/docs/assets/CInputGroup.api.html-O1rxMtka.js
new file mode 100644
index 00000000000..53293d1e57b
--- /dev/null
+++ b/vue/docs/assets/CInputGroup.api.html-O1rxMtka.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cinputgroup" tabindex="-1">CInputGroup <a class="anchor-link" href="#cinputgroup">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CInputGroup_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CInputGroup.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/form/CInputGroup.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CInputGroup.api.html"}]]},"headers":[{"level":3,"title":"CInputGroup","slug":"cinputgroup","link":"#cinputgroup","children":[]}],"filePathRelative":"api/form/CInputGroup.api.md"}');
+export {
+  CInputGroup_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CInputGroupText.api.html-CjjBv0Qa.js b/vue/docs/assets/CInputGroupText.api.html-CjjBv0Qa.js
new file mode 100644
index 00000000000..06d456e8239
--- /dev/null
+++ b/vue/docs/assets/CInputGroupText.api.html-CjjBv0Qa.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cinputgrouptext" tabindex="-1">CInputGroupText <a class="anchor-link" href="#cinputgrouptext">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CInputGroupText_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CInputGroupText.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/form/CInputGroupText.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CInputGroupText.api.html"}]]},"headers":[{"level":3,"title":"CInputGroupText","slug":"cinputgrouptext","link":"#cinputgrouptext","children":[]}],"filePathRelative":"api/form/CInputGroupText.api.md"}');
+export {
+  CInputGroupText_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CInputGroupText.api.html-nYw0lYnn.js b/vue/docs/assets/CInputGroupText.api.html-nYw0lYnn.js
deleted file mode 100644
index 4a63b0f4b86..00000000000
--- a/vue/docs/assets/CInputGroupText.api.html-nYw0lYnn.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CInputGroupText_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CInputGroupText.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/form/CInputGroupText.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/form/CInputGroupText.api.html"}]]},"headers":[{"level":3,"title":"CInputGroupText","slug":"cinputgrouptext","link":"#cinputgrouptext","children":[]}],"filePathRelative":"api/form/CInputGroupText.api.md"}');
-export {
-  CInputGroupText_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CLink.api.html-6FAjEedH.js b/vue/docs/assets/CLink.api.html-6FAjEedH.js
deleted file mode 100644
index 1ac84c88129..00000000000
--- a/vue/docs/assets/CLink.api.html-6FAjEedH.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CLink_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CLink.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/link/CLink.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/link/CLink.api.html"}]]},"headers":[{"level":3,"title":"CLink","slug":"clink","link":"#clink","children":[]}],"filePathRelative":"api/link/CLink.api.md"}');
-export {
-  CLink_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CLink.api.html-CkkUHkLl.js b/vue/docs/assets/CLink.api.html-CkkUHkLl.js
new file mode 100644
index 00000000000..c21a3e34c3c
--- /dev/null
+++ b/vue/docs/assets/CLink.api.html-CkkUHkLl.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="clink" tabindex="-1">CLink <a class="anchor-link" href="#clink">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CLink_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CLink.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/link/CLink.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/link/CLink.api.html"}]]},"headers":[{"level":3,"title":"CLink","slug":"clink","link":"#clink","children":[]}],"filePathRelative":"api/link/CLink.api.md"}');
+export {
+  CLink_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CListGroup.api.html-BoJSzdjE.js b/vue/docs/assets/CListGroup.api.html-BoJSzdjE.js
new file mode 100644
index 00000000000..8ace405b920
--- /dev/null
+++ b/vue/docs/assets/CListGroup.api.html-BoJSzdjE.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="clistgroup" tabindex="-1">CListGroup <a class="anchor-link" href="#clistgroup">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CListGroup_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CListGroup.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/list-group/CListGroup.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/list-group/CListGroup.api.html"}]]},"headers":[{"level":3,"title":"CListGroup","slug":"clistgroup","link":"#clistgroup","children":[]}],"filePathRelative":"api/list-group/CListGroup.api.md"}');
+export {
+  CListGroup_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CListGroup.api.html-CWB2ebuP.js b/vue/docs/assets/CListGroup.api.html-CWB2ebuP.js
deleted file mode 100644
index 4d0496072b1..00000000000
--- a/vue/docs/assets/CListGroup.api.html-CWB2ebuP.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CListGroup_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CListGroup.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/list-group/CListGroup.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/list-group/CListGroup.api.html"}]]},"headers":[{"level":3,"title":"CListGroup","slug":"clistgroup","link":"#clistgroup","children":[]}],"filePathRelative":"api/list-group/CListGroup.api.md"}');
-export {
-  CListGroup_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CListGroupItem.api.html-B75RiEoP.js b/vue/docs/assets/CListGroupItem.api.html-B75RiEoP.js
deleted file mode 100644
index 5ed139400cb..00000000000
--- a/vue/docs/assets/CListGroupItem.api.html-B75RiEoP.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CListGroupItem_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CListGroupItem.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/list-group/CListGroupItem.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/list-group/CListGroupItem.api.html"}]]},"headers":[{"level":3,"title":"CListGroupItem","slug":"clistgroupitem","link":"#clistgroupitem","children":[]}],"filePathRelative":"api/list-group/CListGroupItem.api.md"}');
-export {
-  CListGroupItem_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CListGroupItem.api.html-QGIAoVEf.js b/vue/docs/assets/CListGroupItem.api.html-QGIAoVEf.js
new file mode 100644
index 00000000000..bb09142b60a
--- /dev/null
+++ b/vue/docs/assets/CListGroupItem.api.html-QGIAoVEf.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="clistgroupitem" tabindex="-1">CListGroupItem <a class="anchor-link" href="#clistgroupitem">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CListGroupItem_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CListGroupItem.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/list-group/CListGroupItem.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/list-group/CListGroupItem.api.html"}]]},"headers":[{"level":3,"title":"CListGroupItem","slug":"clistgroupitem","link":"#clistgroupitem","children":[]}],"filePathRelative":"api/list-group/CListGroupItem.api.md"}');
+export {
+  CListGroupItem_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CLoadingButton.api.html-BBbFgjn5.js b/vue/docs/assets/CLoadingButton.api.html-BBbFgjn5.js
new file mode 100644
index 00000000000..ad5d84d1a9d
--- /dev/null
+++ b/vue/docs/assets/CLoadingButton.api.html-BBbFgjn5.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cloadingbutton" tabindex="-1">CLoadingButton <a class="anchor-link" href="#cloadingbutton">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CLoadingButton_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CLoadingButton.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/loading-button/CLoadingButton.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/loading-button/CLoadingButton.api.html"}]]},"headers":[{"level":3,"title":"CLoadingButton","slug":"cloadingbutton","link":"#cloadingbutton","children":[]}],"filePathRelative":"api/loading-button/CLoadingButton.api.md"}');
+export {
+  CLoadingButton_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CLoadingButton.api.html-DlKJUvsa.js b/vue/docs/assets/CLoadingButton.api.html-DlKJUvsa.js
deleted file mode 100644
index d6223950d49..00000000000
--- a/vue/docs/assets/CLoadingButton.api.html-DlKJUvsa.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CLoadingButton_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CLoadingButton.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/loading-button/CLoadingButton.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/loading-button/CLoadingButton.api.html"}]]},"headers":[{"level":3,"title":"CLoadingButton","slug":"cloadingbutton","link":"#cloadingbutton","children":[]}],"filePathRelative":"api/loading-button/CLoadingButton.api.md"}');
-export {
-  CLoadingButton_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CModal.api.html-8P7cw-ZY.js b/vue/docs/assets/CModal.api.html-8P7cw-ZY.js
deleted file mode 100644
index 26eab14a97c..00000000000
--- a/vue/docs/assets/CModal.api.html-8P7cw-ZY.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CModal_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CModal.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/modal/CModal.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/modal/CModal.api.html"}]]},"headers":[{"level":3,"title":"CModal","slug":"cmodal","link":"#cmodal","children":[]}],"filePathRelative":"api/modal/CModal.api.md"}');
-export {
-  CModal_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CModal.api.html-CcahfjI1.js b/vue/docs/assets/CModal.api.html-CcahfjI1.js
new file mode 100644
index 00000000000..0ce79a3616b
--- /dev/null
+++ b/vue/docs/assets/CModal.api.html-CcahfjI1.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmodal" tabindex="-1">CModal <a class="anchor-link" href="#cmodal">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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>container</strong> <br><div class="badge bg-primary">5.3.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-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">5.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>teleport</strong> <br><div class="badge bg-primary">5.3.0+</div></td><td>Generates modal using Teleport.</td><td>boolean</td><td>-</td><td>false</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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CModal_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CModal.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/modal/CModal.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/modal/CModal.api.html"}]]},"headers":[{"level":3,"title":"CModal","slug":"cmodal","link":"#cmodal","children":[]}],"filePathRelative":"api/modal/CModal.api.md"}');
+export {
+  CModal_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CModalBody.api.html-BVcd8oVP.js b/vue/docs/assets/CModalBody.api.html-BVcd8oVP.js
new file mode 100644
index 00000000000..29b5b553f36
--- /dev/null
+++ b/vue/docs/assets/CModalBody.api.html-BVcd8oVP.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmodalbody" tabindex="-1">CModalBody <a class="anchor-link" href="#cmodalbody">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CModalBody_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CModalBody.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/modal/CModalBody.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/modal/CModalBody.api.html"}]]},"headers":[{"level":3,"title":"CModalBody","slug":"cmodalbody","link":"#cmodalbody","children":[]}],"filePathRelative":"api/modal/CModalBody.api.md"}');
+export {
+  CModalBody_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CModalBody.api.html-CHE1pY1A.js b/vue/docs/assets/CModalBody.api.html-CHE1pY1A.js
deleted file mode 100644
index 5ad4921386d..00000000000
--- a/vue/docs/assets/CModalBody.api.html-CHE1pY1A.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CModalBody_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CModalBody.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/modal/CModalBody.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/modal/CModalBody.api.html"}]]},"headers":[{"level":3,"title":"CModalBody","slug":"cmodalbody","link":"#cmodalbody","children":[]}],"filePathRelative":"api/modal/CModalBody.api.md"}');
-export {
-  CModalBody_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CModalFooter.api.html-BOfY4tP-.js b/vue/docs/assets/CModalFooter.api.html-BOfY4tP-.js
new file mode 100644
index 00000000000..5d8c17c7f73
--- /dev/null
+++ b/vue/docs/assets/CModalFooter.api.html-BOfY4tP-.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmodalfooter" tabindex="-1">CModalFooter <a class="anchor-link" href="#cmodalfooter">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CModalFooter_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CModalFooter.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/modal/CModalFooter.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/modal/CModalFooter.api.html"}]]},"headers":[{"level":3,"title":"CModalFooter","slug":"cmodalfooter","link":"#cmodalfooter","children":[]}],"filePathRelative":"api/modal/CModalFooter.api.md"}');
+export {
+  CModalFooter_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CModalFooter.api.html-BsNGmVfu.js b/vue/docs/assets/CModalFooter.api.html-BsNGmVfu.js
deleted file mode 100644
index d6fcd939345..00000000000
--- a/vue/docs/assets/CModalFooter.api.html-BsNGmVfu.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CModalFooter_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CModalFooter.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/modal/CModalFooter.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/modal/CModalFooter.api.html"}]]},"headers":[{"level":3,"title":"CModalFooter","slug":"cmodalfooter","link":"#cmodalfooter","children":[]}],"filePathRelative":"api/modal/CModalFooter.api.md"}');
-export {
-  CModalFooter_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CModalHeader.api.html-Dg9LwxqA.js b/vue/docs/assets/CModalHeader.api.html-Dg9LwxqA.js
deleted file mode 100644
index d6508836528..00000000000
--- a/vue/docs/assets/CModalHeader.api.html-Dg9LwxqA.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CModalHeader_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CModalHeader.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/modal/CModalHeader.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/modal/CModalHeader.api.html"}]]},"headers":[{"level":3,"title":"CModalHeader","slug":"cmodalheader","link":"#cmodalheader","children":[]}],"filePathRelative":"api/modal/CModalHeader.api.md"}');
-export {
-  CModalHeader_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CModalHeader.api.html-DoHVd2NU.js b/vue/docs/assets/CModalHeader.api.html-DoHVd2NU.js
new file mode 100644
index 00000000000..f2c270cb96e
--- /dev/null
+++ b/vue/docs/assets/CModalHeader.api.html-DoHVd2NU.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmodalheader" tabindex="-1">CModalHeader <a class="anchor-link" href="#cmodalheader">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CModalHeader_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CModalHeader.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/modal/CModalHeader.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/modal/CModalHeader.api.html"}]]},"headers":[{"level":3,"title":"CModalHeader","slug":"cmodalheader","link":"#cmodalheader","children":[]}],"filePathRelative":"api/modal/CModalHeader.api.md"}');
+export {
+  CModalHeader_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CModalTitle.api.html-BBDuhOrq.js b/vue/docs/assets/CModalTitle.api.html-BBDuhOrq.js
deleted file mode 100644
index c7e7908ce28..00000000000
--- a/vue/docs/assets/CModalTitle.api.html-BBDuhOrq.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CModalTitle_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CModalTitle.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/modal/CModalTitle.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/modal/CModalTitle.api.html"}]]},"headers":[{"level":3,"title":"CModalTitle","slug":"cmodaltitle","link":"#cmodaltitle","children":[]}],"filePathRelative":"api/modal/CModalTitle.api.md"}');
-export {
-  CModalTitle_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CModalTitle.api.html-ZPHhqxhp.js b/vue/docs/assets/CModalTitle.api.html-ZPHhqxhp.js
new file mode 100644
index 00000000000..d0275bb155c
--- /dev/null
+++ b/vue/docs/assets/CModalTitle.api.html-ZPHhqxhp.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmodaltitle" tabindex="-1">CModalTitle <a class="anchor-link" href="#cmodaltitle">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CModalTitle_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CModalTitle.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/modal/CModalTitle.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/modal/CModalTitle.api.html"}]]},"headers":[{"level":3,"title":"CModalTitle","slug":"cmodaltitle","link":"#cmodaltitle","children":[]}],"filePathRelative":"api/modal/CModalTitle.api.md"}');
+export {
+  CModalTitle_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CMultiSelect.api.html-B9pw_7rn.js b/vue/docs/assets/CMultiSelect.api.html-B9pw_7rn.js
deleted file mode 100644
index a8502b367dc..00000000000
--- a/vue/docs/assets/CMultiSelect.api.html-B9pw_7rn.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-DieqOVIP.js b/vue/docs/assets/CMultiSelect.api.html-DieqOVIP.js
new file mode 100644
index 00000000000..b3f0d357338
--- /dev/null
+++ b/vue/docs/assets/CMultiSelect.api.html-DieqOVIP.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmultiselect" tabindex="-1">CMultiSelect <a class="anchor-link" href="#cmultiselect">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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-CIhoy8ZE.js b/vue/docs/assets/CMultiSelectNativeSelect.api.html-CIhoy8ZE.js
new file mode 100644
index 00000000000..4c7f6e93396
--- /dev/null
+++ b/vue/docs/assets/CMultiSelectNativeSelect.api.html-CIhoy8ZE.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmultiselectgroupoption" tabindex="-1">CMultiSelectGroupOption <a class="anchor-link" href="#cmultiselectgroupoption">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table 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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CMultiSelectNativeSelect_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CMultiSelectNativeSelect.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/multi-select/CMultiSelectNativeSelect.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/multi-select/CMultiSelectNativeSelect.api.html"}]]},"headers":[{"level":3,"title":"CMultiSelectGroupOption","slug":"cmultiselectgroupoption","link":"#cmultiselectgroupoption","children":[]}],"filePathRelative":"api/multi-select/CMultiSelectNativeSelect.api.md"}');
+export {
+  CMultiSelectNativeSelect_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CMultiSelectNativeSelect.api.html-Mfuatll8.js b/vue/docs/assets/CMultiSelectNativeSelect.api.html-Mfuatll8.js
deleted file mode 100644
index 772dfb3610f..00000000000
--- a/vue/docs/assets/CMultiSelectNativeSelect.api.html-Mfuatll8.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CMultiSelectNativeSelect_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CMultiSelectNativeSelect.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/multi-select/CMultiSelectNativeSelect.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/multi-select/CMultiSelectNativeSelect.api.html"}]]},"headers":[{"level":3,"title":"CMultiSelectGroupOption","slug":"cmultiselectgroupoption","link":"#cmultiselectgroupoption","children":[]}],"filePathRelative":"api/multi-select/CMultiSelectNativeSelect.api.md"}');
-export {
-  CMultiSelectNativeSelect_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CMultiSelectOptions.api.html-DivQq4t9.js b/vue/docs/assets/CMultiSelectOptions.api.html-DivQq4t9.js
deleted file mode 100644
index 3667cab2d27..00000000000
--- a/vue/docs/assets/CMultiSelectOptions.api.html-DivQq4t9.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CMultiSelectOptions_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CMultiSelectOptions.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/multi-select/CMultiSelectOptions.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/multi-select/CMultiSelectOptions.api.html"}]]},"headers":[{"level":3,"title":"CMultiSelectOptions","slug":"cmultiselectoptions","link":"#cmultiselectoptions","children":[]}],"filePathRelative":"api/multi-select/CMultiSelectOptions.api.md"}');
-export {
-  CMultiSelectOptions_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CMultiSelectOptions.api.html-DtAlk_Hc.js b/vue/docs/assets/CMultiSelectOptions.api.html-DtAlk_Hc.js
new file mode 100644
index 00000000000..466fb00195a
--- /dev/null
+++ b/vue/docs/assets/CMultiSelectOptions.api.html-DtAlk_Hc.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmultiselectoptions" tabindex="-1">CMultiSelectOptions <a class="anchor-link" href="#cmultiselectoptions">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table 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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CMultiSelectOptions_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CMultiSelectOptions.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/multi-select/CMultiSelectOptions.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/multi-select/CMultiSelectOptions.api.html"}]]},"headers":[{"level":3,"title":"CMultiSelectOptions","slug":"cmultiselectoptions","link":"#cmultiselectoptions","children":[]}],"filePathRelative":"api/multi-select/CMultiSelectOptions.api.md"}');
+export {
+  CMultiSelectOptions_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CMultiSelectSelection.api.html-CUdfepD8.js b/vue/docs/assets/CMultiSelectSelection.api.html-CUdfepD8.js
new file mode 100644
index 00000000000..5f7a6e33171
--- /dev/null
+++ b/vue/docs/assets/CMultiSelectSelection.api.html-CUdfepD8.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cmultiselectselection" tabindex="-1">CMultiSelectSelection <a class="anchor-link" href="#cmultiselectselection">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table 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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CMultiSelectSelection_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CMultiSelectSelection.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/multi-select/CMultiSelectSelection.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/multi-select/CMultiSelectSelection.api.html"}]]},"headers":[{"level":3,"title":"CMultiSelectSelection","slug":"cmultiselectselection","link":"#cmultiselectselection","children":[]}],"filePathRelative":"api/multi-select/CMultiSelectSelection.api.md"}');
+export {
+  CMultiSelectSelection_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CMultiSelectSelection.api.html-D2u4Hpu2.js b/vue/docs/assets/CMultiSelectSelection.api.html-D2u4Hpu2.js
deleted file mode 100644
index 9897fc20894..00000000000
--- a/vue/docs/assets/CMultiSelectSelection.api.html-D2u4Hpu2.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CMultiSelectSelection_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CMultiSelectSelection.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/multi-select/CMultiSelectSelection.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/multi-select/CMultiSelectSelection.api.html"}]]},"headers":[{"level":3,"title":"CMultiSelectSelection","slug":"cmultiselectselection","link":"#cmultiselectselection","children":[]}],"filePathRelative":"api/multi-select/CMultiSelectSelection.api.md"}');
-export {
-  CMultiSelectSelection_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CNav.api.html-BFqXbscE.js b/vue/docs/assets/CNav.api.html-BFqXbscE.js
new file mode 100644
index 00000000000..d8994f0d61d
--- /dev/null
+++ b/vue/docs/assets/CNav.api.html-BFqXbscE.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnav" tabindex="-1">CNav <a class="anchor-link" href="#cnav">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CNav_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CNav.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/nav/CNav.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/nav/CNav.api.html"}]]},"headers":[{"level":3,"title":"CNav","slug":"cnav","link":"#cnav","children":[]}],"filePathRelative":"api/nav/CNav.api.md"}');
+export {
+  CNav_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CNav.api.html-CHflKJ-r.js b/vue/docs/assets/CNav.api.html-CHflKJ-r.js
deleted file mode 100644
index 51751455128..00000000000
--- a/vue/docs/assets/CNav.api.html-CHflKJ-r.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CNav_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CNav.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/nav/CNav.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/nav/CNav.api.html"}]]},"headers":[{"level":3,"title":"CNav","slug":"cnav","link":"#cnav","children":[]}],"filePathRelative":"api/nav/CNav.api.md"}');
-export {
-  CNav_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CNavGroup.api.html-B69rD5K0.js b/vue/docs/assets/CNavGroup.api.html-B69rD5K0.js
deleted file mode 100644
index 5a39fe5448e..00000000000
--- a/vue/docs/assets/CNavGroup.api.html-B69rD5K0.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CNavGroup_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CNavGroup.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/nav/CNavGroup.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/nav/CNavGroup.api.html"}]]},"headers":[{"level":3,"title":"CNavGroup","slug":"cnavgroup","link":"#cnavgroup","children":[]}],"filePathRelative":"api/nav/CNavGroup.api.md"}');
-export {
-  CNavGroup_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CNavGroup.api.html-CQwUJgTt.js b/vue/docs/assets/CNavGroup.api.html-CQwUJgTt.js
new file mode 100644
index 00000000000..09f19597218
--- /dev/null
+++ b/vue/docs/assets/CNavGroup.api.html-CQwUJgTt.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavgroup" tabindex="-1">CNavGroup <a class="anchor-link" href="#cnavgroup">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CNavGroup_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CNavGroup.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/nav/CNavGroup.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/nav/CNavGroup.api.html"}]]},"headers":[{"level":3,"title":"CNavGroup","slug":"cnavgroup","link":"#cnavgroup","children":[]}],"filePathRelative":"api/nav/CNavGroup.api.md"}');
+export {
+  CNavGroup_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CNavGroupItems.api.html-B0aFIsJL.js b/vue/docs/assets/CNavGroupItems.api.html-B0aFIsJL.js
new file mode 100644
index 00000000000..ef33b475ff4
--- /dev/null
+++ b/vue/docs/assets/CNavGroupItems.api.html-B0aFIsJL.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavgroupitems" tabindex="-1">CNavGroupItems <a class="anchor-link" href="#cnavgroupitems">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CNavGroupItems_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CNavGroupItems.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/nav/CNavGroupItems.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/nav/CNavGroupItems.api.html"}]]},"headers":[{"level":3,"title":"CNavGroupItems","slug":"cnavgroupitems","link":"#cnavgroupitems","children":[]}],"filePathRelative":"api/nav/CNavGroupItems.api.md"}');
+export {
+  CNavGroupItems_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CNavGroupItems.api.html-MzViYoW-.js b/vue/docs/assets/CNavGroupItems.api.html-MzViYoW-.js
deleted file mode 100644
index 5faa048c431..00000000000
--- a/vue/docs/assets/CNavGroupItems.api.html-MzViYoW-.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CNavGroupItems_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CNavGroupItems.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/nav/CNavGroupItems.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/nav/CNavGroupItems.api.html"}]]},"headers":[{"level":3,"title":"CNavGroupItems","slug":"cnavgroupitems","link":"#cnavgroupitems","children":[]}],"filePathRelative":"api/nav/CNavGroupItems.api.md"}');
-export {
-  CNavGroupItems_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CNavItem.api.html-BluVGAkl.js b/vue/docs/assets/CNavItem.api.html-BluVGAkl.js
deleted file mode 100644
index 04e299fbad6..00000000000
--- a/vue/docs/assets/CNavItem.api.html-BluVGAkl.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CNavItem_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CNavItem.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/nav/CNavItem.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/nav/CNavItem.api.html"}]]},"headers":[{"level":3,"title":"CNavItem","slug":"cnavitem","link":"#cnavitem","children":[]}],"filePathRelative":"api/nav/CNavItem.api.md"}');
-export {
-  CNavItem_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CNavItem.api.html-D9aqO2xw.js b/vue/docs/assets/CNavItem.api.html-D9aqO2xw.js
new file mode 100644
index 00000000000..0b331f56bd8
--- /dev/null
+++ b/vue/docs/assets/CNavItem.api.html-D9aqO2xw.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavitem" tabindex="-1">CNavItem <a class="anchor-link" href="#cnavitem">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CNavItem_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CNavItem.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/nav/CNavItem.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/nav/CNavItem.api.html"}]]},"headers":[{"level":3,"title":"CNavItem","slug":"cnavitem","link":"#cnavitem","children":[]}],"filePathRelative":"api/nav/CNavItem.api.md"}');
+export {
+  CNavItem_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CNavLink.api.html-2gObI4eE.js b/vue/docs/assets/CNavLink.api.html-2gObI4eE.js
new file mode 100644
index 00000000000..f6ccc5c7f3b
--- /dev/null
+++ b/vue/docs/assets/CNavLink.api.html-2gObI4eE.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavlink" tabindex="-1">CNavLink <a class="anchor-link" href="#cnavlink">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CNavLink_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CNavLink.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/nav/CNavLink.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/nav/CNavLink.api.html"}]]},"headers":[{"level":3,"title":"CNavLink","slug":"cnavlink","link":"#cnavlink","children":[]}],"filePathRelative":"api/nav/CNavLink.api.md"}');
+export {
+  CNavLink_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CNavLink.api.html-BLbL7bWh.js b/vue/docs/assets/CNavLink.api.html-BLbL7bWh.js
deleted file mode 100644
index a424f1f44e6..00000000000
--- a/vue/docs/assets/CNavLink.api.html-BLbL7bWh.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CNavLink_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CNavLink.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/nav/CNavLink.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/nav/CNavLink.api.html"}]]},"headers":[{"level":3,"title":"CNavLink","slug":"cnavlink","link":"#cnavlink","children":[]}],"filePathRelative":"api/nav/CNavLink.api.md"}');
-export {
-  CNavLink_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CNavTitle.api.html-B5pzzmsO.js b/vue/docs/assets/CNavTitle.api.html-B5pzzmsO.js
deleted file mode 100644
index 3e11ecaa3e9..00000000000
--- a/vue/docs/assets/CNavTitle.api.html-B5pzzmsO.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CNavTitle_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CNavTitle.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/nav/CNavTitle.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/nav/CNavTitle.api.html"}]]},"headers":[{"level":3,"title":"CNavTitle","slug":"cnavtitle","link":"#cnavtitle","children":[]}],"filePathRelative":"api/nav/CNavTitle.api.md"}');
-export {
-  CNavTitle_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CNavTitle.api.html-jwhtM3Ht.js b/vue/docs/assets/CNavTitle.api.html-jwhtM3Ht.js
new file mode 100644
index 00000000000..0b82448dae4
--- /dev/null
+++ b/vue/docs/assets/CNavTitle.api.html-jwhtM3Ht.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavtitle" tabindex="-1">CNavTitle <a class="anchor-link" href="#cnavtitle">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CNavTitle_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CNavTitle.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/nav/CNavTitle.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/nav/CNavTitle.api.html"}]]},"headers":[{"level":3,"title":"CNavTitle","slug":"cnavtitle","link":"#cnavtitle","children":[]}],"filePathRelative":"api/nav/CNavTitle.api.md"}');
+export {
+  CNavTitle_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CNavbar.api.html-Bpr_rlAN.js b/vue/docs/assets/CNavbar.api.html-Bpr_rlAN.js
new file mode 100644
index 00000000000..ebf71a82daa
--- /dev/null
+++ b/vue/docs/assets/CNavbar.api.html-Bpr_rlAN.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavbar" tabindex="-1">CNavbar <a class="anchor-link" href="#cnavbar">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CNavbar_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CNavbar.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/navbar/CNavbar.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/navbar/CNavbar.api.html"}]]},"headers":[{"level":3,"title":"CNavbar","slug":"cnavbar","link":"#cnavbar","children":[]}],"filePathRelative":"api/navbar/CNavbar.api.md"}');
+export {
+  CNavbar_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CNavbar.api.html-D6jrKQQE.js b/vue/docs/assets/CNavbar.api.html-D6jrKQQE.js
deleted file mode 100644
index e57f88138c0..00000000000
--- a/vue/docs/assets/CNavbar.api.html-D6jrKQQE.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CNavbar_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CNavbar.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/navbar/CNavbar.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/navbar/CNavbar.api.html"}]]},"headers":[{"level":3,"title":"CNavbar","slug":"cnavbar","link":"#cnavbar","children":[]}],"filePathRelative":"api/navbar/CNavbar.api.md"}');
-export {
-  CNavbar_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CNavbarBrand.api.html-iAKNmT2K.js b/vue/docs/assets/CNavbarBrand.api.html-iAKNmT2K.js
deleted file mode 100644
index 2481a166638..00000000000
--- a/vue/docs/assets/CNavbarBrand.api.html-iAKNmT2K.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CNavbarBrand_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CNavbarBrand.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/navbar/CNavbarBrand.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/navbar/CNavbarBrand.api.html"}]]},"headers":[{"level":3,"title":"CNavbarBrand","slug":"cnavbarbrand","link":"#cnavbarbrand","children":[]}],"filePathRelative":"api/navbar/CNavbarBrand.api.md"}');
-export {
-  CNavbarBrand_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CNavbarBrand.api.html-wHe16RAc.js b/vue/docs/assets/CNavbarBrand.api.html-wHe16RAc.js
new file mode 100644
index 00000000000..ed34f977b16
--- /dev/null
+++ b/vue/docs/assets/CNavbarBrand.api.html-wHe16RAc.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavbarbrand" tabindex="-1">CNavbarBrand <a class="anchor-link" href="#cnavbarbrand">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CNavbarBrand_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CNavbarBrand.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/navbar/CNavbarBrand.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/navbar/CNavbarBrand.api.html"}]]},"headers":[{"level":3,"title":"CNavbarBrand","slug":"cnavbarbrand","link":"#cnavbarbrand","children":[]}],"filePathRelative":"api/navbar/CNavbarBrand.api.md"}');
+export {
+  CNavbarBrand_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CNavbarNav.api.html-BvIABqX_.js b/vue/docs/assets/CNavbarNav.api.html-BvIABqX_.js
new file mode 100644
index 00000000000..7c0373eb160
--- /dev/null
+++ b/vue/docs/assets/CNavbarNav.api.html-BvIABqX_.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavbarnav" tabindex="-1">CNavbarNav <a class="anchor-link" href="#cnavbarnav">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CNavbarNav_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CNavbarNav.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/navbar/CNavbarNav.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/navbar/CNavbarNav.api.html"}]]},"headers":[{"level":3,"title":"CNavbarNav","slug":"cnavbarnav","link":"#cnavbarnav","children":[]}],"filePathRelative":"api/navbar/CNavbarNav.api.md"}');
+export {
+  CNavbarNav_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CNavbarNav.api.html-DTmYoiRc.js b/vue/docs/assets/CNavbarNav.api.html-DTmYoiRc.js
deleted file mode 100644
index 2143a2e69df..00000000000
--- a/vue/docs/assets/CNavbarNav.api.html-DTmYoiRc.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CNavbarNav_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CNavbarNav.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/navbar/CNavbarNav.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/navbar/CNavbarNav.api.html"}]]},"headers":[{"level":3,"title":"CNavbarNav","slug":"cnavbarnav","link":"#cnavbarnav","children":[]}],"filePathRelative":"api/navbar/CNavbarNav.api.md"}');
-export {
-  CNavbarNav_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CNavbarText.api.html-DXM-0CeX.js b/vue/docs/assets/CNavbarText.api.html-DXM-0CeX.js
new file mode 100644
index 00000000000..cd2e2239119
--- /dev/null
+++ b/vue/docs/assets/CNavbarText.api.html-DXM-0CeX.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavbartext" tabindex="-1">CNavbarText <a class="anchor-link" href="#cnavbartext">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CNavbarText_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CNavbarText.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/navbar/CNavbarText.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/navbar/CNavbarText.api.html"}]]},"headers":[{"level":3,"title":"CNavbarText","slug":"cnavbartext","link":"#cnavbartext","children":[]}],"filePathRelative":"api/navbar/CNavbarText.api.md"}');
+export {
+  CNavbarText_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CNavbarText.api.html-DhRgVY0Q.js b/vue/docs/assets/CNavbarText.api.html-DhRgVY0Q.js
deleted file mode 100644
index daf5fa4176b..00000000000
--- a/vue/docs/assets/CNavbarText.api.html-DhRgVY0Q.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CNavbarText_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CNavbarText.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/navbar/CNavbarText.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/navbar/CNavbarText.api.html"}]]},"headers":[{"level":3,"title":"CNavbarText","slug":"cnavbartext","link":"#cnavbartext","children":[]}],"filePathRelative":"api/navbar/CNavbarText.api.md"}');
-export {
-  CNavbarText_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CNavbarToggler.api.html-BHSE5jxT.js b/vue/docs/assets/CNavbarToggler.api.html-BHSE5jxT.js
deleted file mode 100644
index 6b635d6f109..00000000000
--- a/vue/docs/assets/CNavbarToggler.api.html-BHSE5jxT.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CNavbarToggler_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CNavbarToggler.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/navbar/CNavbarToggler.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/navbar/CNavbarToggler.api.html"}]]},"headers":[{"level":3,"title":"CNavbarToggler","slug":"cnavbartoggler","link":"#cnavbartoggler","children":[]}],"filePathRelative":"api/navbar/CNavbarToggler.api.md"}');
-export {
-  CNavbarToggler_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CNavbarToggler.api.html-Du6cS1F2.js b/vue/docs/assets/CNavbarToggler.api.html-Du6cS1F2.js
new file mode 100644
index 00000000000..e16786f429a
--- /dev/null
+++ b/vue/docs/assets/CNavbarToggler.api.html-Du6cS1F2.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cnavbartoggler" tabindex="-1">CNavbarToggler <a class="anchor-link" href="#cnavbartoggler">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CNavbarToggler_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CNavbarToggler.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/navbar/CNavbarToggler.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/navbar/CNavbarToggler.api.html"}]]},"headers":[{"level":3,"title":"CNavbarToggler","slug":"cnavbartoggler","link":"#cnavbartoggler","children":[]}],"filePathRelative":"api/navbar/CNavbarToggler.api.md"}');
+export {
+  CNavbarToggler_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/COffcanvas.api.html--9epuLuW.js b/vue/docs/assets/COffcanvas.api.html--9epuLuW.js
deleted file mode 100644
index 361888c7c26..00000000000
--- a/vue/docs/assets/COffcanvas.api.html--9epuLuW.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const COffcanvas_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "COffcanvas.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/offcanvas/COffcanvas.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/offcanvas/COffcanvas.api.html"}]]},"headers":[{"level":3,"title":"COffcanvas","slug":"coffcanvas","link":"#coffcanvas","children":[]}],"filePathRelative":"api/offcanvas/COffcanvas.api.md"}');
-export {
-  COffcanvas_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/COffcanvas.api.html-C1yrjIbI.js b/vue/docs/assets/COffcanvas.api.html-C1yrjIbI.js
new file mode 100644
index 00000000000..4fe20332ae2
--- /dev/null
+++ b/vue/docs/assets/COffcanvas.api.html-C1yrjIbI.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="coffcanvas" tabindex="-1">COffcanvas <a class="anchor-link" href="#coffcanvas">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const COffcanvas_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "COffcanvas.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/offcanvas/COffcanvas.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/offcanvas/COffcanvas.api.html"}]]},"headers":[{"level":3,"title":"COffcanvas","slug":"coffcanvas","link":"#coffcanvas","children":[]}],"filePathRelative":"api/offcanvas/COffcanvas.api.md"}');
+export {
+  COffcanvas_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/COffcanvasBody.api.html-Cuyu4m1t.js b/vue/docs/assets/COffcanvasBody.api.html-Cuyu4m1t.js
new file mode 100644
index 00000000000..cf6b8324162
--- /dev/null
+++ b/vue/docs/assets/COffcanvasBody.api.html-Cuyu4m1t.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="coffcanvasbody" tabindex="-1">COffcanvasBody <a class="anchor-link" href="#coffcanvasbody">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const COffcanvasBody_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "COffcanvasBody.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/offcanvas/COffcanvasBody.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/offcanvas/COffcanvasBody.api.html"}]]},"headers":[{"level":3,"title":"COffcanvasBody","slug":"coffcanvasbody","link":"#coffcanvasbody","children":[]}],"filePathRelative":"api/offcanvas/COffcanvasBody.api.md"}');
+export {
+  COffcanvasBody_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/COffcanvasBody.api.html-DpuEcC8p.js b/vue/docs/assets/COffcanvasBody.api.html-DpuEcC8p.js
deleted file mode 100644
index 1dfdaff11ee..00000000000
--- a/vue/docs/assets/COffcanvasBody.api.html-DpuEcC8p.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const COffcanvasBody_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "COffcanvasBody.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/offcanvas/COffcanvasBody.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/offcanvas/COffcanvasBody.api.html"}]]},"headers":[{"level":3,"title":"COffcanvasBody","slug":"coffcanvasbody","link":"#coffcanvasbody","children":[]}],"filePathRelative":"api/offcanvas/COffcanvasBody.api.md"}');
-export {
-  COffcanvasBody_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/COffcanvasHeader.api.html-C94tOX9J.js b/vue/docs/assets/COffcanvasHeader.api.html-C94tOX9J.js
new file mode 100644
index 00000000000..66c5b6029b5
--- /dev/null
+++ b/vue/docs/assets/COffcanvasHeader.api.html-C94tOX9J.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="coffcanvasheader" tabindex="-1">COffcanvasHeader <a class="anchor-link" href="#coffcanvasheader">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const COffcanvasHeader_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "COffcanvasHeader.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/offcanvas/COffcanvasHeader.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/offcanvas/COffcanvasHeader.api.html"}]]},"headers":[{"level":3,"title":"COffcanvasHeader","slug":"coffcanvasheader","link":"#coffcanvasheader","children":[]}],"filePathRelative":"api/offcanvas/COffcanvasHeader.api.md"}');
+export {
+  COffcanvasHeader_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/COffcanvasHeader.api.html-CA3y4VF-.js b/vue/docs/assets/COffcanvasHeader.api.html-CA3y4VF-.js
deleted file mode 100644
index 27d0ff23fa7..00000000000
--- a/vue/docs/assets/COffcanvasHeader.api.html-CA3y4VF-.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const COffcanvasHeader_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "COffcanvasHeader.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/offcanvas/COffcanvasHeader.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/offcanvas/COffcanvasHeader.api.html"}]]},"headers":[{"level":3,"title":"COffcanvasHeader","slug":"coffcanvasheader","link":"#coffcanvasheader","children":[]}],"filePathRelative":"api/offcanvas/COffcanvasHeader.api.md"}');
-export {
-  COffcanvasHeader_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/COffcanvasTitle.api.html-BCDNOR0i.js b/vue/docs/assets/COffcanvasTitle.api.html-BCDNOR0i.js
deleted file mode 100644
index d45f7c0ce53..00000000000
--- a/vue/docs/assets/COffcanvasTitle.api.html-BCDNOR0i.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const COffcanvasTitle_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "COffcanvasTitle.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/offcanvas/COffcanvasTitle.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/offcanvas/COffcanvasTitle.api.html"}]]},"headers":[{"level":3,"title":"COffcanvasTitle","slug":"coffcanvastitle","link":"#coffcanvastitle","children":[]}],"filePathRelative":"api/offcanvas/COffcanvasTitle.api.md"}');
-export {
-  COffcanvasTitle_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/COffcanvasTitle.api.html-DWPpS-Pe.js b/vue/docs/assets/COffcanvasTitle.api.html-DWPpS-Pe.js
new file mode 100644
index 00000000000..b40d315392b
--- /dev/null
+++ b/vue/docs/assets/COffcanvasTitle.api.html-DWPpS-Pe.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="coffcanvastitle" tabindex="-1">COffcanvasTitle <a class="anchor-link" href="#coffcanvastitle">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const COffcanvasTitle_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "COffcanvasTitle.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/offcanvas/COffcanvasTitle.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/offcanvas/COffcanvasTitle.api.html"}]]},"headers":[{"level":3,"title":"COffcanvasTitle","slug":"coffcanvastitle","link":"#coffcanvastitle","children":[]}],"filePathRelative":"api/offcanvas/COffcanvasTitle.api.md"}');
+export {
+  COffcanvasTitle_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CPagination.api.html-CDazWQCT.js b/vue/docs/assets/CPagination.api.html-CDazWQCT.js
new file mode 100644
index 00000000000..5cdcb03d020
--- /dev/null
+++ b/vue/docs/assets/CPagination.api.html-CDazWQCT.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cpagination" tabindex="-1">CPagination <a class="anchor-link" href="#cpagination">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CPagination_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CPagination.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/pagination/CPagination.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/pagination/CPagination.api.html"}]]},"headers":[{"level":3,"title":"CPagination","slug":"cpagination","link":"#cpagination","children":[]}],"filePathRelative":"api/pagination/CPagination.api.md"}');
+export {
+  CPagination_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CPagination.api.html-mFhXc4Yf.js b/vue/docs/assets/CPagination.api.html-mFhXc4Yf.js
deleted file mode 100644
index dccc0ca8045..00000000000
--- a/vue/docs/assets/CPagination.api.html-mFhXc4Yf.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CPagination_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CPagination.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/pagination/CPagination.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/pagination/CPagination.api.html"}]]},"headers":[{"level":3,"title":"CPagination","slug":"cpagination","link":"#cpagination","children":[]}],"filePathRelative":"api/pagination/CPagination.api.md"}');
-export {
-  CPagination_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CPaginationItem.api.html-Bsa5oQkt.js b/vue/docs/assets/CPaginationItem.api.html-Bsa5oQkt.js
deleted file mode 100644
index ab723dcf061..00000000000
--- a/vue/docs/assets/CPaginationItem.api.html-Bsa5oQkt.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CPaginationItem_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CPaginationItem.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/pagination/CPaginationItem.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/pagination/CPaginationItem.api.html"}]]},"headers":[{"level":3,"title":"CPaginationItem","slug":"cpaginationitem","link":"#cpaginationitem","children":[]}],"filePathRelative":"api/pagination/CPaginationItem.api.md"}');
-export {
-  CPaginationItem_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CPaginationItem.api.html-CrJi52XB.js b/vue/docs/assets/CPaginationItem.api.html-CrJi52XB.js
new file mode 100644
index 00000000000..a0546dcb44d
--- /dev/null
+++ b/vue/docs/assets/CPaginationItem.api.html-CrJi52XB.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cpaginationitem" tabindex="-1">CPaginationItem <a class="anchor-link" href="#cpaginationitem">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CPaginationItem_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CPaginationItem.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/pagination/CPaginationItem.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/pagination/CPaginationItem.api.html"}]]},"headers":[{"level":3,"title":"CPaginationItem","slug":"cpaginationitem","link":"#cpaginationitem","children":[]}],"filePathRelative":"api/pagination/CPaginationItem.api.md"}');
+export {
+  CPaginationItem_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CPicker.api.html-Da5Hysn9.js b/vue/docs/assets/CPicker.api.html-Da5Hysn9.js
deleted file mode 100644
index 0bfe3fb79f3..00000000000
--- a/vue/docs/assets/CPicker.api.html-Da5Hysn9.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CPicker_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CPicker.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/picker/CPicker.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/picker/CPicker.api.html"}]]},"headers":[{"level":3,"title":"CPicker","slug":"cpicker","link":"#cpicker","children":[]}],"filePathRelative":"api/picker/CPicker.api.md"}');
-export {
-  CPicker_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CPicker.api.html-oSkyMXwU.js b/vue/docs/assets/CPicker.api.html-oSkyMXwU.js
new file mode 100644
index 00000000000..f70fff10a6d
--- /dev/null
+++ b/vue/docs/assets/CPicker.api.html-oSkyMXwU.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cpicker" tabindex="-1">CPicker <a class="anchor-link" href="#cpicker">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CPicker_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CPicker.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/picker/CPicker.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/picker/CPicker.api.html"}]]},"headers":[{"level":3,"title":"CPicker","slug":"cpicker","link":"#cpicker","children":[]}],"filePathRelative":"api/picker/CPicker.api.md"}');
+export {
+  CPicker_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CPlaceholder.api.html-CpcOzpbr.js b/vue/docs/assets/CPlaceholder.api.html-CpcOzpbr.js
deleted file mode 100644
index 06d22a06dd9..00000000000
--- a/vue/docs/assets/CPlaceholder.api.html-CpcOzpbr.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CPlaceholder_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CPlaceholder.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/placeholder/CPlaceholder.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/placeholder/CPlaceholder.api.html"}]]},"headers":[{"level":3,"title":"CPlaceholder","slug":"cplaceholder","link":"#cplaceholder","children":[]}],"filePathRelative":"api/placeholder/CPlaceholder.api.md"}');
-export {
-  CPlaceholder_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CPlaceholder.api.html-TZhyRjR4.js b/vue/docs/assets/CPlaceholder.api.html-TZhyRjR4.js
new file mode 100644
index 00000000000..42ed856b404
--- /dev/null
+++ b/vue/docs/assets/CPlaceholder.api.html-TZhyRjR4.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cplaceholder" tabindex="-1">CPlaceholder <a class="anchor-link" href="#cplaceholder">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CPlaceholder_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CPlaceholder.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/placeholder/CPlaceholder.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/placeholder/CPlaceholder.api.html"}]]},"headers":[{"level":3,"title":"CPlaceholder","slug":"cplaceholder","link":"#cplaceholder","children":[]}],"filePathRelative":"api/placeholder/CPlaceholder.api.md"}');
+export {
+  CPlaceholder_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CPopover.api.html-tQSUMLbj.js b/vue/docs/assets/CPopover.api.html-tQSUMLbj.js
new file mode 100644
index 00000000000..86908a3b7bd
--- /dev/null
+++ b/vue/docs/assets/CPopover.api.html-tQSUMLbj.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cpopover" tabindex="-1">CPopover <a class="anchor-link" href="#cpopover">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">5.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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CPopover_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CPopover.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/popover/CPopover.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/popover/CPopover.api.html"}]]},"headers":[{"level":3,"title":"CPopover","slug":"cpopover","link":"#cpopover","children":[]}],"filePathRelative":"api/popover/CPopover.api.md"}');
+export {
+  CPopover_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CPopover.api.html-ymVfjSSe.js b/vue/docs/assets/CPopover.api.html-ymVfjSSe.js
deleted file mode 100644
index dd4387236f0..00000000000
--- a/vue/docs/assets/CPopover.api.html-ymVfjSSe.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CPopover_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CPopover.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/popover/CPopover.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/popover/CPopover.api.html"}]]},"headers":[{"level":3,"title":"CPopover","slug":"cpopover","link":"#cpopover","children":[]}],"filePathRelative":"api/popover/CPopover.api.md"}');
-export {
-  CPopover_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CProgress.api.html-C-66SSng.js b/vue/docs/assets/CProgress.api.html-DtBG3iso.js
similarity index 85%
rename from vue/docs/assets/CProgress.api.html-C-66SSng.js
rename to vue/docs/assets/CProgress.api.html-DtBG3iso.js
index 6a3b7166024..126a915432f 100644
--- a/vue/docs/assets/CProgress.api.html-C-66SSng.js
+++ b/vue/docs/assets/CProgress.api.html-DtBG3iso.js
@@ -1,6 +1,6 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, f as createTextVNode, d as createVNode, a as createStaticVNode } from "./app-DGOUrGv-.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-highlighter="prismjs" data-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_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cprogress" tabindex="-1">CProgress <a class="anchor-link" href="#cprogress">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</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-BjA2nShz.js b/vue/docs/assets/CProgressBar.api.html-BjA2nShz.js
deleted file mode 100644
index 1f7385f401b..00000000000
--- a/vue/docs/assets/CProgressBar.api.html-BjA2nShz.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CProgressBar_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CProgressBar.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/progress/CProgressBar.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/progress/CProgressBar.api.html"}]]},"headers":[{"level":3,"title":"CProgressBar","slug":"cprogressbar","link":"#cprogressbar","children":[]}],"filePathRelative":"api/progress/CProgressBar.api.md"}');
-export {
-  CProgressBar_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CProgressBar.api.html-DbiY29uU.js b/vue/docs/assets/CProgressBar.api.html-DbiY29uU.js
new file mode 100644
index 00000000000..04c6a8dbf64
--- /dev/null
+++ b/vue/docs/assets/CProgressBar.api.html-DbiY29uU.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cprogressbar" tabindex="-1">CProgressBar <a class="anchor-link" href="#cprogressbar">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CProgressBar_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CProgressBar.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/progress/CProgressBar.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/progress/CProgressBar.api.html"}]]},"headers":[{"level":3,"title":"CProgressBar","slug":"cprogressbar","link":"#cprogressbar","children":[]}],"filePathRelative":"api/progress/CProgressBar.api.md"}');
+export {
+  CProgressBar_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CProgressStacked.api.html-D0_SIwt3.js b/vue/docs/assets/CProgressStacked.api.html-D0_SIwt3.js
new file mode 100644
index 00000000000..55a804db4ee
--- /dev/null
+++ b/vue/docs/assets/CProgressStacked.api.html-D0_SIwt3.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cprogressstacked" tabindex="-1">CProgressStacked <a class="anchor-link" href="#cprogressstacked">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CProgressStacked_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CProgressStacked.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/progress/CProgressStacked.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/progress/CProgressStacked.api.html"}]]},"headers":[{"level":3,"title":"CProgressStacked","slug":"cprogressstacked","link":"#cprogressstacked","children":[]}],"filePathRelative":"api/progress/CProgressStacked.api.md"}');
+export {
+  CProgressStacked_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CProgressStacked.api.html-iS9rdju9.js b/vue/docs/assets/CProgressStacked.api.html-iS9rdju9.js
deleted file mode 100644
index 358632b5d87..00000000000
--- a/vue/docs/assets/CProgressStacked.api.html-iS9rdju9.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CProgressStacked_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CProgressStacked.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/progress/CProgressStacked.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/progress/CProgressStacked.api.html"}]]},"headers":[{"level":3,"title":"CProgressStacked","slug":"cprogressstacked","link":"#cprogressstacked","children":[]}],"filePathRelative":"api/progress/CProgressStacked.api.md"}');
-export {
-  CProgressStacked_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CRating.api.html-CbBSuHpA.js b/vue/docs/assets/CRating.api.html-CbBSuHpA.js
deleted file mode 100644
index 563be251d00..00000000000
--- a/vue/docs/assets/CRating.api.html-CbBSuHpA.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CRating_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CRating.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/rating/CRating.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/rating/CRating.api.html"}]]},"headers":[{"level":3,"title":"CRating","slug":"crating","link":"#crating","children":[]}],"filePathRelative":"api/rating/CRating.api.md"}');
-export {
-  CRating_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CRating.api.html-c48h2dsU.js b/vue/docs/assets/CRating.api.html-c48h2dsU.js
new file mode 100644
index 00000000000..9c856e2093e
--- /dev/null
+++ b/vue/docs/assets/CRating.api.html-c48h2dsU.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="crating" tabindex="-1">CRating <a class="anchor-link" href="#crating">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CRating_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CRating.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/rating/CRating.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/rating/CRating.api.html"}]]},"headers":[{"level":3,"title":"CRating","slug":"crating","link":"#crating","children":[]}],"filePathRelative":"api/rating/CRating.api.md"}');
+export {
+  CRating_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CRow.api.html-BfZBZHbO.js b/vue/docs/assets/CRow.api.html-BfZBZHbO.js
new file mode 100644
index 00000000000..dd0b1afe22b
--- /dev/null
+++ b/vue/docs/assets/CRow.api.html-BfZBZHbO.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="crow" tabindex="-1">CRow <a class="anchor-link" href="#crow">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CRow_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CRow.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/grid/CRow.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/grid/CRow.api.html"}]]},"headers":[{"level":3,"title":"CRow","slug":"crow","link":"#crow","children":[]}],"filePathRelative":"api/grid/CRow.api.md"}');
+export {
+  CRow_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CRow.api.html-CIrSW5Ga.js b/vue/docs/assets/CRow.api.html-CIrSW5Ga.js
deleted file mode 100644
index 9ff201ae616..00000000000
--- a/vue/docs/assets/CRow.api.html-CIrSW5Ga.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CRow_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CRow.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/grid/CRow.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/grid/CRow.api.html"}]]},"headers":[{"level":3,"title":"CRow","slug":"crow","link":"#crow","children":[]}],"filePathRelative":"api/grid/CRow.api.md"}');
-export {
-  CRow_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CSidebar.api.html-CTwTsKKM.js b/vue/docs/assets/CSidebar.api.html-CTwTsKKM.js
new file mode 100644
index 00000000000..7f694afa2dc
--- /dev/null
+++ b/vue/docs/assets/CSidebar.api.html-CTwTsKKM.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csidebar" tabindex="-1">CSidebar <a class="anchor-link" href="#csidebar">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CSidebar_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSidebar.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/sidebar/CSidebar.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/sidebar/CSidebar.api.html"}]]},"headers":[{"level":3,"title":"CSidebar","slug":"csidebar","link":"#csidebar","children":[]}],"filePathRelative":"api/sidebar/CSidebar.api.md"}');
+export {
+  CSidebar_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CSidebar.api.html-DaxOjldv.js b/vue/docs/assets/CSidebar.api.html-DaxOjldv.js
deleted file mode 100644
index 5d969ec1103..00000000000
--- a/vue/docs/assets/CSidebar.api.html-DaxOjldv.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CSidebar_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSidebar.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/sidebar/CSidebar.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/sidebar/CSidebar.api.html"}]]},"headers":[{"level":3,"title":"CSidebar","slug":"csidebar","link":"#csidebar","children":[]}],"filePathRelative":"api/sidebar/CSidebar.api.md"}');
-export {
-  CSidebar_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CSidebarBrand.api.html-BDwVBijp.js b/vue/docs/assets/CSidebarBrand.api.html-BDwVBijp.js
new file mode 100644
index 00000000000..6ddd488a46b
--- /dev/null
+++ b/vue/docs/assets/CSidebarBrand.api.html-BDwVBijp.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csidebarbrand" tabindex="-1">CSidebarBrand <a class="anchor-link" href="#csidebarbrand">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CSidebarBrand_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSidebarBrand.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/sidebar/CSidebarBrand.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/sidebar/CSidebarBrand.api.html"}]]},"headers":[{"level":3,"title":"CSidebarBrand","slug":"csidebarbrand","link":"#csidebarbrand","children":[]}],"filePathRelative":"api/sidebar/CSidebarBrand.api.md"}');
+export {
+  CSidebarBrand_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CSidebarBrand.api.html-CMvNigzU.js b/vue/docs/assets/CSidebarBrand.api.html-CMvNigzU.js
deleted file mode 100644
index abe4ac87053..00000000000
--- a/vue/docs/assets/CSidebarBrand.api.html-CMvNigzU.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CSidebarBrand_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSidebarBrand.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/sidebar/CSidebarBrand.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/sidebar/CSidebarBrand.api.html"}]]},"headers":[{"level":3,"title":"CSidebarBrand","slug":"csidebarbrand","link":"#csidebarbrand","children":[]}],"filePathRelative":"api/sidebar/CSidebarBrand.api.md"}');
-export {
-  CSidebarBrand_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CSidebarFooter.api.html-9MYkXiDf.js b/vue/docs/assets/CSidebarFooter.api.html-9MYkXiDf.js
new file mode 100644
index 00000000000..a8dff3b657c
--- /dev/null
+++ b/vue/docs/assets/CSidebarFooter.api.html-9MYkXiDf.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csidebarfooter" tabindex="-1">CSidebarFooter <a class="anchor-link" href="#csidebarfooter">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CSidebarFooter_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSidebarFooter.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/sidebar/CSidebarFooter.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/sidebar/CSidebarFooter.api.html"}]]},"headers":[{"level":3,"title":"CSidebarFooter","slug":"csidebarfooter","link":"#csidebarfooter","children":[]}],"filePathRelative":"api/sidebar/CSidebarFooter.api.md"}');
+export {
+  CSidebarFooter_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CSidebarFooter.api.html-DG6rj4Di.js b/vue/docs/assets/CSidebarFooter.api.html-DG6rj4Di.js
deleted file mode 100644
index c767bb16807..00000000000
--- a/vue/docs/assets/CSidebarFooter.api.html-DG6rj4Di.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CSidebarFooter_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSidebarFooter.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/sidebar/CSidebarFooter.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/sidebar/CSidebarFooter.api.html"}]]},"headers":[{"level":3,"title":"CSidebarFooter","slug":"csidebarfooter","link":"#csidebarfooter","children":[]}],"filePathRelative":"api/sidebar/CSidebarFooter.api.md"}');
-export {
-  CSidebarFooter_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CSidebarHeader.api.html-CFlZhoRs.js b/vue/docs/assets/CSidebarHeader.api.html-CFlZhoRs.js
new file mode 100644
index 00000000000..69a603341f3
--- /dev/null
+++ b/vue/docs/assets/CSidebarHeader.api.html-CFlZhoRs.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csidebarheader" tabindex="-1">CSidebarHeader <a class="anchor-link" href="#csidebarheader">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CSidebarHeader_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSidebarHeader.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/sidebar/CSidebarHeader.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/sidebar/CSidebarHeader.api.html"}]]},"headers":[{"level":3,"title":"CSidebarHeader","slug":"csidebarheader","link":"#csidebarheader","children":[]}],"filePathRelative":"api/sidebar/CSidebarHeader.api.md"}');
+export {
+  CSidebarHeader_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CSidebarHeader.api.html-UjLXre_-.js b/vue/docs/assets/CSidebarHeader.api.html-UjLXre_-.js
deleted file mode 100644
index 8c080d6f755..00000000000
--- a/vue/docs/assets/CSidebarHeader.api.html-UjLXre_-.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CSidebarHeader_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSidebarHeader.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/sidebar/CSidebarHeader.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/sidebar/CSidebarHeader.api.html"}]]},"headers":[{"level":3,"title":"CSidebarHeader","slug":"csidebarheader","link":"#csidebarheader","children":[]}],"filePathRelative":"api/sidebar/CSidebarHeader.api.md"}');
-export {
-  CSidebarHeader_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CSidebarNav.api.html-DPgns5YK.js b/vue/docs/assets/CSidebarNav.api.html-DPgns5YK.js
new file mode 100644
index 00000000000..1257d3b93eb
--- /dev/null
+++ b/vue/docs/assets/CSidebarNav.api.html-DPgns5YK.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csidebarnav" tabindex="-1">CSidebarNav <a class="anchor-link" href="#csidebarnav">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CSidebarNav_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSidebarNav.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/sidebar/CSidebarNav.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/sidebar/CSidebarNav.api.html"}]]},"headers":[{"level":3,"title":"CSidebarNav","slug":"csidebarnav","link":"#csidebarnav","children":[]}],"filePathRelative":"api/sidebar/CSidebarNav.api.md"}');
+export {
+  CSidebarNav_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CSidebarNav.api.html-ZV8snc4P.js b/vue/docs/assets/CSidebarNav.api.html-ZV8snc4P.js
deleted file mode 100644
index 064236af1a5..00000000000
--- a/vue/docs/assets/CSidebarNav.api.html-ZV8snc4P.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CSidebarNav_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSidebarNav.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/sidebar/CSidebarNav.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/sidebar/CSidebarNav.api.html"}]]},"headers":[{"level":3,"title":"CSidebarNav","slug":"csidebarnav","link":"#csidebarnav","children":[]}],"filePathRelative":"api/sidebar/CSidebarNav.api.md"}');
-export {
-  CSidebarNav_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CSidebarToggler.api.html-CCzfHjoN.js b/vue/docs/assets/CSidebarToggler.api.html-CCzfHjoN.js
new file mode 100644
index 00000000000..b902feaada9
--- /dev/null
+++ b/vue/docs/assets/CSidebarToggler.api.html-CCzfHjoN.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csidebartoggler" tabindex="-1">CSidebarToggler <a class="anchor-link" href="#csidebartoggler">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CSidebarToggler_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSidebarToggler.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/sidebar/CSidebarToggler.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/sidebar/CSidebarToggler.api.html"}]]},"headers":[{"level":3,"title":"CSidebarToggler","slug":"csidebartoggler","link":"#csidebartoggler","children":[]}],"filePathRelative":"api/sidebar/CSidebarToggler.api.md"}');
+export {
+  CSidebarToggler_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CSidebarToggler.api.html-CwaVG0LH.js b/vue/docs/assets/CSidebarToggler.api.html-CwaVG0LH.js
deleted file mode 100644
index 7477edc8706..00000000000
--- a/vue/docs/assets/CSidebarToggler.api.html-CwaVG0LH.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CSidebarToggler_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSidebarToggler.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/sidebar/CSidebarToggler.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/sidebar/CSidebarToggler.api.html"}]]},"headers":[{"level":3,"title":"CSidebarToggler","slug":"csidebartoggler","link":"#csidebartoggler","children":[]}],"filePathRelative":"api/sidebar/CSidebarToggler.api.md"}');
-export {
-  CSidebarToggler_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CSmartPagination.api.html-BikuSyAw.js b/vue/docs/assets/CSmartPagination.api.html-BikuSyAw.js
deleted file mode 100644
index d86dd895a1c..00000000000
--- a/vue/docs/assets/CSmartPagination.api.html-BikuSyAw.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CSmartPagination_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSmartPagination.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/smart-pagination/CSmartPagination.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/smart-pagination/CSmartPagination.api.html"}]]},"headers":[{"level":3,"title":"CSmartPagination","slug":"csmartpagination","link":"#csmartpagination","children":[]}],"filePathRelative":"api/smart-pagination/CSmartPagination.api.md"}');
-export {
-  CSmartPagination_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CSmartPagination.api.html-BtDrxSb-.js b/vue/docs/assets/CSmartPagination.api.html-BtDrxSb-.js
new file mode 100644
index 00000000000..63b9b0147e4
--- /dev/null
+++ b/vue/docs/assets/CSmartPagination.api.html-BtDrxSb-.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csmartpagination" tabindex="-1">CSmartPagination <a class="anchor-link" href="#csmartpagination">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CSmartPagination_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSmartPagination.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/smart-pagination/CSmartPagination.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/smart-pagination/CSmartPagination.api.html"}]]},"headers":[{"level":3,"title":"CSmartPagination","slug":"csmartpagination","link":"#csmartpagination","children":[]}],"filePathRelative":"api/smart-pagination/CSmartPagination.api.md"}');
+export {
+  CSmartPagination_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CSmartPagination.api.html-CrCaD_lP.js b/vue/docs/assets/CSmartPagination.api.html-CrCaD_lP.js
deleted file mode 100644
index 3183d223dcd..00000000000
--- a/vue/docs/assets/CSmartPagination.api.html-CrCaD_lP.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CSmartPagination_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSmartPagination.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/pagination/CSmartPagination.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/pagination/CSmartPagination.api.html"}]]},"headers":[{"level":3,"title":"CSmartPagination","slug":"csmartpagination","link":"#csmartpagination","children":[]}],"filePathRelative":"api/pagination/CSmartPagination.api.md"}');
-export {
-  CSmartPagination_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CSmartPagination.api.html-CtPxYRy0.js b/vue/docs/assets/CSmartPagination.api.html-CtPxYRy0.js
new file mode 100644
index 00000000000..9f82c6ee0d8
--- /dev/null
+++ b/vue/docs/assets/CSmartPagination.api.html-CtPxYRy0.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csmartpagination" tabindex="-1">CSmartPagination <a class="anchor-link" href="#csmartpagination">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CSmartPagination_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSmartPagination.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/pagination/CSmartPagination.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/pagination/CSmartPagination.api.html"}]]},"headers":[{"level":3,"title":"CSmartPagination","slug":"csmartpagination","link":"#csmartpagination","children":[]}],"filePathRelative":"api/pagination/CSmartPagination.api.md"}');
+export {
+  CSmartPagination_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CSmartTable.api.html-DBtpefqV.js b/vue/docs/assets/CSmartTable.api.html-DBtpefqV.js
deleted file mode 100644
index e0e56319fa4..00000000000
--- a/vue/docs/assets/CSmartTable.api.html-DBtpefqV.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CSmartTable_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSmartTable.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/smart-table/CSmartTable.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/smart-table/CSmartTable.api.html"}]]},"headers":[{"level":3,"title":"CSmartTable","slug":"csmarttable","link":"#csmarttable","children":[]}],"filePathRelative":"api/smart-table/CSmartTable.api.md"}');
-export {
-  CSmartTable_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CSmartTable.api.html-DGm1bmhO.js b/vue/docs/assets/CSmartTable.api.html-DGm1bmhO.js
new file mode 100644
index 00000000000..8f0666df4bc
--- /dev/null
+++ b/vue/docs/assets/CSmartTable.api.html-DGm1bmhO.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csmarttable" tabindex="-1">CSmartTable <a class="anchor-link" href="#csmarttable">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CSmartTable_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSmartTable.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/smart-table/CSmartTable.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/smart-table/CSmartTable.api.html"}]]},"headers":[{"level":3,"title":"CSmartTable","slug":"csmarttable","link":"#csmarttable","children":[]}],"filePathRelative":"api/smart-table/CSmartTable.api.md"}');
+export {
+  CSmartTable_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CSmartTableBody.api.html-BnkPBl42.js b/vue/docs/assets/CSmartTableBody.api.html-BnkPBl42.js
deleted file mode 100644
index 61cb0c37a72..00000000000
--- a/vue/docs/assets/CSmartTableBody.api.html-BnkPBl42.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CSmartTableBody_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSmartTableBody.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/smart-table/CSmartTableBody.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/smart-table/CSmartTableBody.api.html"}]]},"headers":[{"level":3,"title":"CSmartTableBody","slug":"csmarttablebody","link":"#csmarttablebody","children":[]}],"filePathRelative":"api/smart-table/CSmartTableBody.api.md"}');
-export {
-  CSmartTableBody_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CSmartTableBody.api.html-Ct54x_n5.js b/vue/docs/assets/CSmartTableBody.api.html-Ct54x_n5.js
new file mode 100644
index 00000000000..61c8ba7495d
--- /dev/null
+++ b/vue/docs/assets/CSmartTableBody.api.html-Ct54x_n5.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csmarttablebody" tabindex="-1">CSmartTableBody <a class="anchor-link" href="#csmarttablebody">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table 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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CSmartTableBody_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSmartTableBody.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/smart-table/CSmartTableBody.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/smart-table/CSmartTableBody.api.html"}]]},"headers":[{"level":3,"title":"CSmartTableBody","slug":"csmarttablebody","link":"#csmarttablebody","children":[]}],"filePathRelative":"api/smart-table/CSmartTableBody.api.md"}');
+export {
+  CSmartTableBody_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CSmartTableCleaner.api.html-Ca51YF0C.js b/vue/docs/assets/CSmartTableCleaner.api.html-Ca51YF0C.js
deleted file mode 100644
index 2a9176e519e..00000000000
--- a/vue/docs/assets/CSmartTableCleaner.api.html-Ca51YF0C.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CSmartTableCleaner_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSmartTableCleaner.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/smart-table/CSmartTableCleaner.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/smart-table/CSmartTableCleaner.api.html"}]]},"headers":[{"level":3,"title":"CSmartTableCleaner","slug":"csmarttablecleaner","link":"#csmarttablecleaner","children":[]}],"filePathRelative":"api/smart-table/CSmartTableCleaner.api.md"}');
-export {
-  CSmartTableCleaner_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CSmartTableCleaner.api.html-D3V7dsv2.js b/vue/docs/assets/CSmartTableCleaner.api.html-D3V7dsv2.js
new file mode 100644
index 00000000000..5d89d31f9d0
--- /dev/null
+++ b/vue/docs/assets/CSmartTableCleaner.api.html-D3V7dsv2.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csmarttablecleaner" tabindex="-1">CSmartTableCleaner <a class="anchor-link" href="#csmarttablecleaner">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table 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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CSmartTableCleaner_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSmartTableCleaner.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/smart-table/CSmartTableCleaner.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/smart-table/CSmartTableCleaner.api.html"}]]},"headers":[{"level":3,"title":"CSmartTableCleaner","slug":"csmarttablecleaner","link":"#csmarttablecleaner","children":[]}],"filePathRelative":"api/smart-table/CSmartTableCleaner.api.md"}');
+export {
+  CSmartTableCleaner_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CSmartTableFilter.api.html-B7_1b50f.js b/vue/docs/assets/CSmartTableFilter.api.html-B7_1b50f.js
deleted file mode 100644
index 2388be04f07..00000000000
--- a/vue/docs/assets/CSmartTableFilter.api.html-B7_1b50f.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CSmartTableFilter_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSmartTableFilter.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/smart-table/CSmartTableFilter.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/smart-table/CSmartTableFilter.api.html"}]]},"headers":[{"level":3,"title":"CSmartTableFilter","slug":"csmarttablefilter","link":"#csmarttablefilter","children":[]}],"filePathRelative":"api/smart-table/CSmartTableFilter.api.md"}');
-export {
-  CSmartTableFilter_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CSmartTableFilter.api.html-DUCc6wnW.js b/vue/docs/assets/CSmartTableFilter.api.html-DUCc6wnW.js
new file mode 100644
index 00000000000..656884294a1
--- /dev/null
+++ b/vue/docs/assets/CSmartTableFilter.api.html-DUCc6wnW.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csmarttablefilter" tabindex="-1">CSmartTableFilter <a class="anchor-link" href="#csmarttablefilter">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CSmartTableFilter_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSmartTableFilter.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/smart-table/CSmartTableFilter.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/smart-table/CSmartTableFilter.api.html"}]]},"headers":[{"level":3,"title":"CSmartTableFilter","slug":"csmarttablefilter","link":"#csmarttablefilter","children":[]}],"filePathRelative":"api/smart-table/CSmartTableFilter.api.md"}');
+export {
+  CSmartTableFilter_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CSmartTableHead.api.html-BObUzIwn.js b/vue/docs/assets/CSmartTableHead.api.html-BObUzIwn.js
new file mode 100644
index 00000000000..a7f63c9763e
--- /dev/null
+++ b/vue/docs/assets/CSmartTableHead.api.html-BObUzIwn.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csmarttablehead" tabindex="-1">CSmartTableHead <a class="anchor-link" href="#csmarttablehead">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table 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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CSmartTableHead_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSmartTableHead.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/smart-table/CSmartTableHead.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/smart-table/CSmartTableHead.api.html"}]]},"headers":[{"level":3,"title":"CSmartTableHead","slug":"csmarttablehead","link":"#csmarttablehead","children":[]}],"filePathRelative":"api/smart-table/CSmartTableHead.api.md"}');
+export {
+  CSmartTableHead_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CSmartTableHead.api.html-DW9ZUntG.js b/vue/docs/assets/CSmartTableHead.api.html-DW9ZUntG.js
deleted file mode 100644
index e9f507f0857..00000000000
--- a/vue/docs/assets/CSmartTableHead.api.html-DW9ZUntG.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CSmartTableHead_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSmartTableHead.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/smart-table/CSmartTableHead.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/smart-table/CSmartTableHead.api.html"}]]},"headers":[{"level":3,"title":"CSmartTableHead","slug":"csmarttablehead","link":"#csmarttablehead","children":[]}],"filePathRelative":"api/smart-table/CSmartTableHead.api.md"}');
-export {
-  CSmartTableHead_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CSmartTableItemsPerPageSelector.api.html-BcdEUUOn.js b/vue/docs/assets/CSmartTableItemsPerPageSelector.api.html-BcdEUUOn.js
new file mode 100644
index 00000000000..90741f07871
--- /dev/null
+++ b/vue/docs/assets/CSmartTableItemsPerPageSelector.api.html-BcdEUUOn.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="csmarttableitemsperpageselector" tabindex="-1">CSmartTableItemsPerPageSelector <a class="anchor-link" href="#csmarttableitemsperpageselector">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table 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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CSmartTableItemsPerPageSelector_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSmartTableItemsPerPageSelector.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/smart-table/CSmartTableItemsPerPageSelector.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/smart-table/CSmartTableItemsPerPageSelector.api.html"}]]},"headers":[{"level":3,"title":"CSmartTableItemsPerPageSelector","slug":"csmarttableitemsperpageselector","link":"#csmarttableitemsperpageselector","children":[]}],"filePathRelative":"api/smart-table/CSmartTableItemsPerPageSelector.api.md"}');
+export {
+  CSmartTableItemsPerPageSelector_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CSmartTableItemsPerPageSelector.api.html-BqX7W_5v.js b/vue/docs/assets/CSmartTableItemsPerPageSelector.api.html-BqX7W_5v.js
deleted file mode 100644
index b60b7c5b819..00000000000
--- a/vue/docs/assets/CSmartTableItemsPerPageSelector.api.html-BqX7W_5v.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CSmartTableItemsPerPageSelector_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSmartTableItemsPerPageSelector.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/smart-table/CSmartTableItemsPerPageSelector.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/smart-table/CSmartTableItemsPerPageSelector.api.html"}]]},"headers":[{"level":3,"title":"CSmartTableItemsPerPageSelector","slug":"csmarttableitemsperpageselector","link":"#csmarttableitemsperpageselector","children":[]}],"filePathRelative":"api/smart-table/CSmartTableItemsPerPageSelector.api.md"}');
-export {
-  CSmartTableItemsPerPageSelector_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CSpinner.api.html-O0NhTV-x.js b/vue/docs/assets/CSpinner.api.html-O0NhTV-x.js
deleted file mode 100644
index 96400a5e2e9..00000000000
--- a/vue/docs/assets/CSpinner.api.html-O0NhTV-x.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CSpinner_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSpinner.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/spinner/CSpinner.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/spinner/CSpinner.api.html"}]]},"headers":[{"level":3,"title":"CSpinner","slug":"cspinner","link":"#cspinner","children":[]}],"filePathRelative":"api/spinner/CSpinner.api.md"}');
-export {
-  CSpinner_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CSpinner.api.html-tz9ud1zw.js b/vue/docs/assets/CSpinner.api.html-tz9ud1zw.js
new file mode 100644
index 00000000000..fc72332d1a6
--- /dev/null
+++ b/vue/docs/assets/CSpinner.api.html-tz9ud1zw.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cspinner" tabindex="-1">CSpinner <a class="anchor-link" href="#cspinner">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CSpinner_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CSpinner.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/spinner/CSpinner.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/spinner/CSpinner.api.html"}]]},"headers":[{"level":3,"title":"CSpinner","slug":"cspinner","link":"#cspinner","children":[]}],"filePathRelative":"api/spinner/CSpinner.api.md"}');
+export {
+  CSpinner_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CTab.api.html-C_8FIEMx.js b/vue/docs/assets/CTab.api.html-C_8FIEMx.js
new file mode 100644
index 00000000000..ef9ae85c985
--- /dev/null
+++ b/vue/docs/assets/CTab.api.html-C_8FIEMx.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctab" tabindex="-1">CTab <a class="anchor-link" href="#ctab">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CTab_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTab.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/tabs/CTab.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/tabs/CTab.api.html"}]]},"headers":[{"level":3,"title":"CTab","slug":"ctab","link":"#ctab","children":[]}],"filePathRelative":"api/tabs/CTab.api.md"}');
+export {
+  CTab_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CTab.api.html-DOCKLIPZ.js b/vue/docs/assets/CTab.api.html-DOCKLIPZ.js
deleted file mode 100644
index 63f51a6414d..00000000000
--- a/vue/docs/assets/CTab.api.html-DOCKLIPZ.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CTab_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTab.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/tabs/CTab.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/tabs/CTab.api.html"}]]},"headers":[{"level":3,"title":"CTab","slug":"ctab","link":"#ctab","children":[]}],"filePathRelative":"api/tabs/CTab.api.md"}');
-export {
-  CTab_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CTabContent.api.html-1j4Vrr4K.js b/vue/docs/assets/CTabContent.api.html-1j4Vrr4K.js
new file mode 100644
index 00000000000..59a18b53296
--- /dev/null
+++ b/vue/docs/assets/CTabContent.api.html-1j4Vrr4K.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctabcontent" tabindex="-1">CTabContent <a class="anchor-link" href="#ctabcontent">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CTabContent_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTabContent.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/tabs/CTabContent.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/tabs/CTabContent.api.html"}]]},"headers":[{"level":3,"title":"CTabContent","slug":"ctabcontent","link":"#ctabcontent","children":[]}],"filePathRelative":"api/tabs/CTabContent.api.md"}');
+export {
+  CTabContent_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CTabContent.api.html-C2PinBa9.js b/vue/docs/assets/CTabContent.api.html-C2PinBa9.js
deleted file mode 100644
index 36b9f92dece..00000000000
--- a/vue/docs/assets/CTabContent.api.html-C2PinBa9.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CTabContent_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTabContent.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/tabs/CTabContent.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/tabs/CTabContent.api.html"}]]},"headers":[{"level":3,"title":"CTabContent","slug":"ctabcontent","link":"#ctabcontent","children":[]}],"filePathRelative":"api/tabs/CTabContent.api.md"}');
-export {
-  CTabContent_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CTabList.api.html-BEqv9sl7.js b/vue/docs/assets/CTabList.api.html-BEqv9sl7.js
deleted file mode 100644
index 3eb60531e4f..00000000000
--- a/vue/docs/assets/CTabList.api.html-BEqv9sl7.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CTabList_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTabList.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/tabs/CTabList.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/tabs/CTabList.api.html"}]]},"headers":[{"level":3,"title":"CTabList","slug":"ctablist","link":"#ctablist","children":[]}],"filePathRelative":"api/tabs/CTabList.api.md"}');
-export {
-  CTabList_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CTabList.api.html-Cmt2uvE5.js b/vue/docs/assets/CTabList.api.html-Cmt2uvE5.js
new file mode 100644
index 00000000000..3ffed0d993c
--- /dev/null
+++ b/vue/docs/assets/CTabList.api.html-Cmt2uvE5.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctablist" tabindex="-1">CTabList <a class="anchor-link" href="#ctablist">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CTabList_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTabList.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/tabs/CTabList.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/tabs/CTabList.api.html"}]]},"headers":[{"level":3,"title":"CTabList","slug":"ctablist","link":"#ctablist","children":[]}],"filePathRelative":"api/tabs/CTabList.api.md"}');
+export {
+  CTabList_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CTabPane.api.html-B47A_sq6.js b/vue/docs/assets/CTabPane.api.html-B47A_sq6.js
deleted file mode 100644
index 3b8af4623d3..00000000000
--- a/vue/docs/assets/CTabPane.api.html-B47A_sq6.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CTabPane_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTabPane.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/tabs/CTabPane.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/tabs/CTabPane.api.html"}]]},"headers":[{"level":3,"title":"CTabPane","slug":"ctabpane","link":"#ctabpane","children":[]}],"filePathRelative":"api/tabs/CTabPane.api.md"}');
-export {
-  CTabPane_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CTabPane.api.html-CNWr2MmF.js b/vue/docs/assets/CTabPane.api.html-CNWr2MmF.js
new file mode 100644
index 00000000000..ff95b7fb932
--- /dev/null
+++ b/vue/docs/assets/CTabPane.api.html-CNWr2MmF.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctabpane" tabindex="-1">CTabPane <a class="anchor-link" href="#ctabpane">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CTabPane_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTabPane.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/tabs/CTabPane.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/tabs/CTabPane.api.html"}]]},"headers":[{"level":3,"title":"CTabPane","slug":"ctabpane","link":"#ctabpane","children":[]}],"filePathRelative":"api/tabs/CTabPane.api.md"}');
+export {
+  CTabPane_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CTabPanel.api.html-CZYhUIL_.js b/vue/docs/assets/CTabPanel.api.html-CZYhUIL_.js
deleted file mode 100644
index 0c9466735c7..00000000000
--- a/vue/docs/assets/CTabPanel.api.html-CZYhUIL_.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CTabPanel_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTabPanel.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/tabs/CTabPanel.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/tabs/CTabPanel.api.html"}]]},"headers":[{"level":3,"title":"CTabPanel","slug":"ctabpanel","link":"#ctabpanel","children":[]}],"filePathRelative":"api/tabs/CTabPanel.api.md"}');
-export {
-  CTabPanel_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CTabPanel.api.html-Civ-9a5a.js b/vue/docs/assets/CTabPanel.api.html-Civ-9a5a.js
new file mode 100644
index 00000000000..295d92d7721
--- /dev/null
+++ b/vue/docs/assets/CTabPanel.api.html-Civ-9a5a.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctabpanel" tabindex="-1">CTabPanel <a class="anchor-link" href="#ctabpanel">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CTabPanel_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTabPanel.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/tabs/CTabPanel.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/tabs/CTabPanel.api.html"}]]},"headers":[{"level":3,"title":"CTabPanel","slug":"ctabpanel","link":"#ctabpanel","children":[]}],"filePathRelative":"api/tabs/CTabPanel.api.md"}');
+export {
+  CTabPanel_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CTable.api.html-D0dRnCW-.js b/vue/docs/assets/CTable.api.html-D0dRnCW-.js
deleted file mode 100644
index 5346ec287c5..00000000000
--- a/vue/docs/assets/CTable.api.html-D0dRnCW-.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CTable_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTable.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/table/CTable.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/table/CTable.api.html"}]]},"headers":[{"level":3,"title":"CTable","slug":"ctable","link":"#ctable","children":[]}],"filePathRelative":"api/table/CTable.api.md"}');
-export {
-  CTable_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CTable.api.html-DNonlxhT.js b/vue/docs/assets/CTable.api.html-DNonlxhT.js
new file mode 100644
index 00000000000..63f85c62e35
--- /dev/null
+++ b/vue/docs/assets/CTable.api.html-DNonlxhT.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctable" tabindex="-1">CTable <a class="anchor-link" href="#ctable">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CTable_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTable.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/table/CTable.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/table/CTable.api.html"}]]},"headers":[{"level":3,"title":"CTable","slug":"ctable","link":"#ctable","children":[]}],"filePathRelative":"api/table/CTable.api.md"}');
+export {
+  CTable_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CTableBody.api.html-BE5qkKGP.js b/vue/docs/assets/CTableBody.api.html-BE5qkKGP.js
new file mode 100644
index 00000000000..b22a08a6697
--- /dev/null
+++ b/vue/docs/assets/CTableBody.api.html-BE5qkKGP.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctablebody" tabindex="-1">CTableBody <a class="anchor-link" href="#ctablebody">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CTableBody_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTableBody.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/table/CTableBody.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/table/CTableBody.api.html"}]]},"headers":[{"level":3,"title":"CTableBody","slug":"ctablebody","link":"#ctablebody","children":[]}],"filePathRelative":"api/table/CTableBody.api.md"}');
+export {
+  CTableBody_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CTableBody.api.html-BFPdQqw6.js b/vue/docs/assets/CTableBody.api.html-BFPdQqw6.js
deleted file mode 100644
index 528bf4ae1db..00000000000
--- a/vue/docs/assets/CTableBody.api.html-BFPdQqw6.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CTableBody_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTableBody.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/table/CTableBody.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/table/CTableBody.api.html"}]]},"headers":[{"level":3,"title":"CTableBody","slug":"ctablebody","link":"#ctablebody","children":[]}],"filePathRelative":"api/table/CTableBody.api.md"}');
-export {
-  CTableBody_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CTableCaption.api.html-MTWPlJR7.js b/vue/docs/assets/CTableCaption.api.html-MTWPlJR7.js
deleted file mode 100644
index ce78e7d1306..00000000000
--- a/vue/docs/assets/CTableCaption.api.html-MTWPlJR7.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CTableCaption_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTableCaption.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/table/CTableCaption.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/table/CTableCaption.api.html"}]]},"headers":[{"level":3,"title":"CTableCaption","slug":"ctablecaption","link":"#ctablecaption","children":[]}],"filePathRelative":"api/table/CTableCaption.api.md"}');
-export {
-  CTableCaption_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CTableCaption.api.html-phSXI7iF.js b/vue/docs/assets/CTableCaption.api.html-phSXI7iF.js
new file mode 100644
index 00000000000..9f5af73fce5
--- /dev/null
+++ b/vue/docs/assets/CTableCaption.api.html-phSXI7iF.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctablecaption" tabindex="-1">CTableCaption <a class="anchor-link" href="#ctablecaption">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CTableCaption_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTableCaption.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/table/CTableCaption.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/table/CTableCaption.api.html"}]]},"headers":[{"level":3,"title":"CTableCaption","slug":"ctablecaption","link":"#ctablecaption","children":[]}],"filePathRelative":"api/table/CTableCaption.api.md"}');
+export {
+  CTableCaption_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CTableDataCell.api.html-CTzr6HkH.js b/vue/docs/assets/CTableDataCell.api.html-CTzr6HkH.js
new file mode 100644
index 00000000000..d6aa638f941
--- /dev/null
+++ b/vue/docs/assets/CTableDataCell.api.html-CTzr6HkH.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctabledatacell" tabindex="-1">CTableDataCell <a class="anchor-link" href="#ctabledatacell">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CTableDataCell_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTableDataCell.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/table/CTableDataCell.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/table/CTableDataCell.api.html"}]]},"headers":[{"level":3,"title":"CTableDataCell","slug":"ctabledatacell","link":"#ctabledatacell","children":[]}],"filePathRelative":"api/table/CTableDataCell.api.md"}');
+export {
+  CTableDataCell_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CTableDataCell.api.html-r0s-YiAY.js b/vue/docs/assets/CTableDataCell.api.html-r0s-YiAY.js
deleted file mode 100644
index 7042e062e46..00000000000
--- a/vue/docs/assets/CTableDataCell.api.html-r0s-YiAY.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CTableDataCell_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTableDataCell.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/table/CTableDataCell.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/table/CTableDataCell.api.html"}]]},"headers":[{"level":3,"title":"CTableDataCell","slug":"ctabledatacell","link":"#ctabledatacell","children":[]}],"filePathRelative":"api/table/CTableDataCell.api.md"}');
-export {
-  CTableDataCell_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CTableFoot.api.html-DcRu-Wur.js b/vue/docs/assets/CTableFoot.api.html-DcRu-Wur.js
new file mode 100644
index 00000000000..e159b7b0b10
--- /dev/null
+++ b/vue/docs/assets/CTableFoot.api.html-DcRu-Wur.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctablefoot" tabindex="-1">CTableFoot <a class="anchor-link" href="#ctablefoot">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CTableFoot_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTableFoot.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/table/CTableFoot.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/table/CTableFoot.api.html"}]]},"headers":[{"level":3,"title":"CTableFoot","slug":"ctablefoot","link":"#ctablefoot","children":[]}],"filePathRelative":"api/table/CTableFoot.api.md"}');
+export {
+  CTableFoot_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CTableFoot.api.html-FVtyDTMQ.js b/vue/docs/assets/CTableFoot.api.html-FVtyDTMQ.js
deleted file mode 100644
index d4a2454dd37..00000000000
--- a/vue/docs/assets/CTableFoot.api.html-FVtyDTMQ.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CTableFoot_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTableFoot.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/table/CTableFoot.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/table/CTableFoot.api.html"}]]},"headers":[{"level":3,"title":"CTableFoot","slug":"ctablefoot","link":"#ctablefoot","children":[]}],"filePathRelative":"api/table/CTableFoot.api.md"}');
-export {
-  CTableFoot_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CTableHead.api.html-CuaSabQj.js b/vue/docs/assets/CTableHead.api.html-CuaSabQj.js
deleted file mode 100644
index f428c8e304f..00000000000
--- a/vue/docs/assets/CTableHead.api.html-CuaSabQj.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CTableHead_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTableHead.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/table/CTableHead.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/table/CTableHead.api.html"}]]},"headers":[{"level":3,"title":"CTableHead","slug":"ctablehead","link":"#ctablehead","children":[]}],"filePathRelative":"api/table/CTableHead.api.md"}');
-export {
-  CTableHead_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CTableHead.api.html-jC7mLOK8.js b/vue/docs/assets/CTableHead.api.html-jC7mLOK8.js
new file mode 100644
index 00000000000..c4dc4684a1f
--- /dev/null
+++ b/vue/docs/assets/CTableHead.api.html-jC7mLOK8.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctablehead" tabindex="-1">CTableHead <a class="anchor-link" href="#ctablehead">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CTableHead_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTableHead.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/table/CTableHead.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/table/CTableHead.api.html"}]]},"headers":[{"level":3,"title":"CTableHead","slug":"ctablehead","link":"#ctablehead","children":[]}],"filePathRelative":"api/table/CTableHead.api.md"}');
+export {
+  CTableHead_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CTableHeaderCell.api.html-BDiQC33l.js b/vue/docs/assets/CTableHeaderCell.api.html-BDiQC33l.js
new file mode 100644
index 00000000000..d8d7e708bd2
--- /dev/null
+++ b/vue/docs/assets/CTableHeaderCell.api.html-BDiQC33l.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctableheadercell" tabindex="-1">CTableHeaderCell <a class="anchor-link" href="#ctableheadercell">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CTableHeaderCell_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTableHeaderCell.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/table/CTableHeaderCell.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/table/CTableHeaderCell.api.html"}]]},"headers":[{"level":3,"title":"CTableHeaderCell","slug":"ctableheadercell","link":"#ctableheadercell","children":[]}],"filePathRelative":"api/table/CTableHeaderCell.api.md"}');
+export {
+  CTableHeaderCell_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CTableHeaderCell.api.html-DahKEodk.js b/vue/docs/assets/CTableHeaderCell.api.html-DahKEodk.js
deleted file mode 100644
index 91bc82ed31b..00000000000
--- a/vue/docs/assets/CTableHeaderCell.api.html-DahKEodk.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CTableHeaderCell_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTableHeaderCell.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/table/CTableHeaderCell.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/table/CTableHeaderCell.api.html"}]]},"headers":[{"level":3,"title":"CTableHeaderCell","slug":"ctableheadercell","link":"#ctableheadercell","children":[]}],"filePathRelative":"api/table/CTableHeaderCell.api.md"}');
-export {
-  CTableHeaderCell_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CTableRow.api.html-BS0zN1Kr.js b/vue/docs/assets/CTableRow.api.html-BS0zN1Kr.js
new file mode 100644
index 00000000000..5b6c674eed5
--- /dev/null
+++ b/vue/docs/assets/CTableRow.api.html-BS0zN1Kr.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctablerow" tabindex="-1">CTableRow <a class="anchor-link" href="#ctablerow">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CTableRow_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTableRow.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/table/CTableRow.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/table/CTableRow.api.html"}]]},"headers":[{"level":3,"title":"CTableRow","slug":"ctablerow","link":"#ctablerow","children":[]}],"filePathRelative":"api/table/CTableRow.api.md"}');
+export {
+  CTableRow_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CTableRow.api.html-Bh9JvciN.js b/vue/docs/assets/CTableRow.api.html-Bh9JvciN.js
deleted file mode 100644
index a24d694665c..00000000000
--- a/vue/docs/assets/CTableRow.api.html-Bh9JvciN.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CTableRow_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTableRow.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/table/CTableRow.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/table/CTableRow.api.html"}]]},"headers":[{"level":3,"title":"CTableRow","slug":"ctablerow","link":"#ctablerow","children":[]}],"filePathRelative":"api/table/CTableRow.api.md"}');
-export {
-  CTableRow_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CTabs.api.html-BFEYxLzk.js b/vue/docs/assets/CTabs.api.html-BFEYxLzk.js
deleted file mode 100644
index b3375a20d2d..00000000000
--- a/vue/docs/assets/CTabs.api.html-BFEYxLzk.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CTabs_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTabs.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/tabs/CTabs.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/tabs/CTabs.api.html"}]]},"headers":[{"level":3,"title":"CTabs","slug":"ctabs","link":"#ctabs","children":[]}],"filePathRelative":"api/tabs/CTabs.api.md"}');
-export {
-  CTabs_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CTabs.api.html-DnMHi3vy.js b/vue/docs/assets/CTabs.api.html-DnMHi3vy.js
new file mode 100644
index 00000000000..175fb09c62f
--- /dev/null
+++ b/vue/docs/assets/CTabs.api.html-DnMHi3vy.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctabs" tabindex="-1">CTabs <a class="anchor-link" href="#ctabs">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CTabs_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTabs.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/tabs/CTabs.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/tabs/CTabs.api.html"}]]},"headers":[{"level":3,"title":"CTabs","slug":"ctabs","link":"#ctabs","children":[]}],"filePathRelative":"api/tabs/CTabs.api.md"}');
+export {
+  CTabs_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CTimePicker.api.html-B1LPdULH.js b/vue/docs/assets/CTimePicker.api.html-B1LPdULH.js
deleted file mode 100644
index 7c1d27e2b74..00000000000
--- a/vue/docs/assets/CTimePicker.api.html-B1LPdULH.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CTimePicker_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTimePicker.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/time-picker/CTimePicker.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/time-picker/CTimePicker.api.html"}]]},"headers":[{"level":3,"title":"CTimePicker","slug":"ctimepicker","link":"#ctimepicker","children":[]}],"filePathRelative":"api/time-picker/CTimePicker.api.md"}');
-export {
-  CTimePicker_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CTimePicker.api.html-C_1ZXYrv.js b/vue/docs/assets/CTimePicker.api.html-C_1ZXYrv.js
new file mode 100644
index 00000000000..9b5e0455196
--- /dev/null
+++ b/vue/docs/assets/CTimePicker.api.html-C_1ZXYrv.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctimepicker" tabindex="-1">CTimePicker <a class="anchor-link" href="#ctimepicker">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CTimePicker_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTimePicker.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/time-picker/CTimePicker.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/time-picker/CTimePicker.api.html"}]]},"headers":[{"level":3,"title":"CTimePicker","slug":"ctimepicker","link":"#ctimepicker","children":[]}],"filePathRelative":"api/time-picker/CTimePicker.api.md"}');
+export {
+  CTimePicker_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CTimePickerRollCol.api.html-BP01-pLv.js b/vue/docs/assets/CTimePickerRollCol.api.html-BP01-pLv.js
new file mode 100644
index 00000000000..4537e6ea7ee
--- /dev/null
+++ b/vue/docs/assets/CTimePickerRollCol.api.html-BP01-pLv.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctimepickerrollcol" tabindex="-1">CTimePickerRollCol <a class="anchor-link" href="#ctimepickerrollcol">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table 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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CTimePickerRollCol_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTimePickerRollCol.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/time-picker/CTimePickerRollCol.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/time-picker/CTimePickerRollCol.api.html"}]]},"headers":[{"level":3,"title":"CTimePickerRollCol","slug":"ctimepickerrollcol","link":"#ctimepickerrollcol","children":[]}],"filePathRelative":"api/time-picker/CTimePickerRollCol.api.md"}');
+export {
+  CTimePickerRollCol_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CTimePickerRollCol.api.html-CKuM6oLe.js b/vue/docs/assets/CTimePickerRollCol.api.html-CKuM6oLe.js
deleted file mode 100644
index d70b5e24b27..00000000000
--- a/vue/docs/assets/CTimePickerRollCol.api.html-CKuM6oLe.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CTimePickerRollCol_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTimePickerRollCol.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/time-picker/CTimePickerRollCol.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/time-picker/CTimePickerRollCol.api.html"}]]},"headers":[{"level":3,"title":"CTimePickerRollCol","slug":"ctimepickerrollcol","link":"#ctimepickerrollcol","children":[]}],"filePathRelative":"api/time-picker/CTimePickerRollCol.api.md"}');
-export {
-  CTimePickerRollCol_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CToast.api.html-CMbe9i1s.js b/vue/docs/assets/CToast.api.html-CMbe9i1s.js
new file mode 100644
index 00000000000..ac6da74e010
--- /dev/null
+++ b/vue/docs/assets/CToast.api.html-CMbe9i1s.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctoast" tabindex="-1">CToast <a class="anchor-link" href="#ctoast">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CToast_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CToast.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/toast/CToast.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/toast/CToast.api.html"}]]},"headers":[{"level":3,"title":"CToast","slug":"ctoast","link":"#ctoast","children":[]}],"filePathRelative":"api/toast/CToast.api.md"}');
+export {
+  CToast_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CToast.api.html-CrpEOCPn.js b/vue/docs/assets/CToast.api.html-CrpEOCPn.js
deleted file mode 100644
index d282623bc9c..00000000000
--- a/vue/docs/assets/CToast.api.html-CrpEOCPn.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CToast_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CToast.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/toast/CToast.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/toast/CToast.api.html"}]]},"headers":[{"level":3,"title":"CToast","slug":"ctoast","link":"#ctoast","children":[]}],"filePathRelative":"api/toast/CToast.api.md"}');
-export {
-  CToast_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CToastBody.api.html-4viEj-di.js b/vue/docs/assets/CToastBody.api.html-4viEj-di.js
deleted file mode 100644
index 0ff062a4872..00000000000
--- a/vue/docs/assets/CToastBody.api.html-4viEj-di.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_3);
-}
-const CToastBody_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CToastBody.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/toast/CToastBody.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/toast/CToastBody.api.html"}]]},"headers":[{"level":3,"title":"CToastBody","slug":"ctoastbody","link":"#ctoastbody","children":[]}],"filePathRelative":"api/toast/CToastBody.api.md"}');
-export {
-  CToastBody_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CToastBody.api.html-JaBADYAu.js b/vue/docs/assets/CToastBody.api.html-JaBADYAu.js
new file mode 100644
index 00000000000..9d340c0ec3e
--- /dev/null
+++ b/vue/docs/assets/CToastBody.api.html-JaBADYAu.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctoastbody" tabindex="-1">CToastBody <a class="anchor-link" href="#ctoastbody">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_3);
+}
+const CToastBody_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CToastBody.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/toast/CToastBody.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/toast/CToastBody.api.html"}]]},"headers":[{"level":3,"title":"CToastBody","slug":"ctoastbody","link":"#ctoastbody","children":[]}],"filePathRelative":"api/toast/CToastBody.api.md"}');
+export {
+  CToastBody_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CToastClose.api.html-D5MPMBvN.js b/vue/docs/assets/CToastClose.api.html-D5MPMBvN.js
deleted file mode 100644
index 6dc3382f3b7..00000000000
--- a/vue/docs/assets/CToastClose.api.html-D5MPMBvN.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CToastClose_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CToastClose.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/toast/CToastClose.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/toast/CToastClose.api.html"}]]},"headers":[{"level":3,"title":"CToastClose","slug":"ctoastclose","link":"#ctoastclose","children":[]}],"filePathRelative":"api/toast/CToastClose.api.md"}');
-export {
-  CToastClose_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CToastClose.api.html-YQ6mj1QO.js b/vue/docs/assets/CToastClose.api.html-YQ6mj1QO.js
new file mode 100644
index 00000000000..57dbfca0e11
--- /dev/null
+++ b/vue/docs/assets/CToastClose.api.html-YQ6mj1QO.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctoastclose" tabindex="-1">CToastClose <a class="anchor-link" href="#ctoastclose">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CToastClose_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CToastClose.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/toast/CToastClose.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/toast/CToastClose.api.html"}]]},"headers":[{"level":3,"title":"CToastClose","slug":"ctoastclose","link":"#ctoastclose","children":[]}],"filePathRelative":"api/toast/CToastClose.api.md"}');
+export {
+  CToastClose_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CToastHeader.api.html-Bb_cYC6K.js b/vue/docs/assets/CToastHeader.api.html-Bb_cYC6K.js
new file mode 100644
index 00000000000..51bf935e468
--- /dev/null
+++ b/vue/docs/assets/CToastHeader.api.html-Bb_cYC6K.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctoastheader" tabindex="-1">CToastHeader <a class="anchor-link" href="#ctoastheader">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CToastHeader_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CToastHeader.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/toast/CToastHeader.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/toast/CToastHeader.api.html"}]]},"headers":[{"level":3,"title":"CToastHeader","slug":"ctoastheader","link":"#ctoastheader","children":[]}],"filePathRelative":"api/toast/CToastHeader.api.md"}');
+export {
+  CToastHeader_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CToastHeader.api.html-Bp3krdZ3.js b/vue/docs/assets/CToastHeader.api.html-Bp3krdZ3.js
deleted file mode 100644
index 21dce8299e6..00000000000
--- a/vue/docs/assets/CToastHeader.api.html-Bp3krdZ3.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CToastHeader_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CToastHeader.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/toast/CToastHeader.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/toast/CToastHeader.api.html"}]]},"headers":[{"level":3,"title":"CToastHeader","slug":"ctoastheader","link":"#ctoastheader","children":[]}],"filePathRelative":"api/toast/CToastHeader.api.md"}');
-export {
-  CToastHeader_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CToaster.api.html-CZ4AWR-a.js b/vue/docs/assets/CToaster.api.html-CZ4AWR-a.js
deleted file mode 100644
index 2bb6f33e2ee..00000000000
--- a/vue/docs/assets/CToaster.api.html-CZ4AWR-a.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CToaster_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CToaster.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/toast/CToaster.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/toast/CToaster.api.html"}]]},"headers":[{"level":3,"title":"CToaster","slug":"ctoaster","link":"#ctoaster","children":[]}],"filePathRelative":"api/toast/CToaster.api.md"}');
-export {
-  CToaster_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CToaster.api.html-DIlPMx7J.js b/vue/docs/assets/CToaster.api.html-DIlPMx7J.js
new file mode 100644
index 00000000000..509d8c3d63a
--- /dev/null
+++ b/vue/docs/assets/CToaster.api.html-DIlPMx7J.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctoaster" tabindex="-1">CToaster <a class="anchor-link" href="#ctoaster">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CToaster_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CToaster.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/toast/CToaster.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/toast/CToaster.api.html"}]]},"headers":[{"level":3,"title":"CToaster","slug":"ctoaster","link":"#ctoaster","children":[]}],"filePathRelative":"api/toast/CToaster.api.md"}');
+export {
+  CToaster_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CTooltip.api.html-BG1bcVkZ.js b/vue/docs/assets/CTooltip.api.html-BG1bcVkZ.js
new file mode 100644
index 00000000000..456edaa338c
--- /dev/null
+++ b/vue/docs/assets/CTooltip.api.html-BG1bcVkZ.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="ctooltip" tabindex="-1">CTooltip <a class="anchor-link" href="#ctooltip">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">5.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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CTooltip_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTooltip.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/tooltip/CTooltip.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/tooltip/CTooltip.api.html"}]]},"headers":[{"level":3,"title":"CTooltip","slug":"ctooltip","link":"#ctooltip","children":[]}],"filePathRelative":"api/tooltip/CTooltip.api.md"}');
+export {
+  CTooltip_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CTooltip.api.html-Dd9JcsKh.js b/vue/docs/assets/CTooltip.api.html-Dd9JcsKh.js
deleted file mode 100644
index 3a13c533e0c..00000000000
--- a/vue/docs/assets/CTooltip.api.html-Dd9JcsKh.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CTooltip_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CTooltip.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/tooltip/CTooltip.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/tooltip/CTooltip.api.html"}]]},"headers":[{"level":3,"title":"CTooltip","slug":"ctooltip","link":"#ctooltip","children":[]}],"filePathRelative":"api/tooltip/CTooltip.api.md"}');
-export {
-  CTooltip_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CVirtualScroller.api.html-CYqYd6bS.js b/vue/docs/assets/CVirtualScroller.api.html-CYqYd6bS.js
new file mode 100644
index 00000000000..42cb509aa12
--- /dev/null
+++ b/vue/docs/assets/CVirtualScroller.api.html-CYqYd6bS.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cvirtualscroller" tabindex="-1">CVirtualScroller <a class="anchor-link" href="#cvirtualscroller">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CVirtualScroller_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CVirtualScroller.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/virtual-scroller/CVirtualScroller.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/virtual-scroller/CVirtualScroller.api.html"}]]},"headers":[{"level":3,"title":"CVirtualScroller","slug":"cvirtualscroller","link":"#cvirtualscroller","children":[]}],"filePathRelative":"api/virtual-scroller/CVirtualScroller.api.md"}');
+export {
+  CVirtualScroller_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CVirtualScroller.api.html-OI5523Hm.js b/vue/docs/assets/CVirtualScroller.api.html-OI5523Hm.js
deleted file mode 100644
index bca2b750894..00000000000
--- a/vue/docs/assets/CVirtualScroller.api.html-OI5523Hm.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CVirtualScroller_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CVirtualScroller.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/virtual-scroller/CVirtualScroller.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/virtual-scroller/CVirtualScroller.api.html"}]]},"headers":[{"level":3,"title":"CVirtualScroller","slug":"cvirtualscroller","link":"#cvirtualscroller","children":[]}],"filePathRelative":"api/virtual-scroller/CVirtualScroller.api.md"}');
-export {
-  CVirtualScroller_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CWidgetStatsA.api.html-CQAWIPeh.js b/vue/docs/assets/CWidgetStatsA.api.html-CQAWIPeh.js
new file mode 100644
index 00000000000..a795bf1feac
--- /dev/null
+++ b/vue/docs/assets/CWidgetStatsA.api.html-CQAWIPeh.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cwidgetstatsa" tabindex="-1">CWidgetStatsA <a class="anchor-link" href="#cwidgetstatsa">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CWidgetStatsA_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CWidgetStatsA.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/widgets/CWidgetStatsA.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/widgets/CWidgetStatsA.api.html"}]]},"headers":[{"level":3,"title":"CWidgetStatsA","slug":"cwidgetstatsa","link":"#cwidgetstatsa","children":[]}],"filePathRelative":"api/widgets/CWidgetStatsA.api.md"}');
+export {
+  CWidgetStatsA_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CWidgetStatsA.api.html-DD_G_0XR.js b/vue/docs/assets/CWidgetStatsA.api.html-DD_G_0XR.js
deleted file mode 100644
index 5a511f45136..00000000000
--- a/vue/docs/assets/CWidgetStatsA.api.html-DD_G_0XR.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CWidgetStatsA_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CWidgetStatsA.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/widgets/CWidgetStatsA.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/widgets/CWidgetStatsA.api.html"}]]},"headers":[{"level":3,"title":"CWidgetStatsA","slug":"cwidgetstatsa","link":"#cwidgetstatsa","children":[]}],"filePathRelative":"api/widgets/CWidgetStatsA.api.md"}');
-export {
-  CWidgetStatsA_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CWidgetStatsB.api.html-8R9003Ye.js b/vue/docs/assets/CWidgetStatsB.api.html-8R9003Ye.js
new file mode 100644
index 00000000000..d565ff7f839
--- /dev/null
+++ b/vue/docs/assets/CWidgetStatsB.api.html-8R9003Ye.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cwidgetstatsb" tabindex="-1">CWidgetStatsB <a class="anchor-link" href="#cwidgetstatsb">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_5);
+}
+const CWidgetStatsB_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CWidgetStatsB.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/widgets/CWidgetStatsB.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/widgets/CWidgetStatsB.api.html"}]]},"headers":[{"level":3,"title":"CWidgetStatsB","slug":"cwidgetstatsb","link":"#cwidgetstatsb","children":[]}],"filePathRelative":"api/widgets/CWidgetStatsB.api.md"}');
+export {
+  CWidgetStatsB_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CWidgetStatsB.api.html-BDmKGNGc.js b/vue/docs/assets/CWidgetStatsB.api.html-BDmKGNGc.js
deleted file mode 100644
index 714acd782fa..00000000000
--- a/vue/docs/assets/CWidgetStatsB.api.html-BDmKGNGc.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_5);
-}
-const CWidgetStatsB_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CWidgetStatsB.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/widgets/CWidgetStatsB.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/widgets/CWidgetStatsB.api.html"}]]},"headers":[{"level":3,"title":"CWidgetStatsB","slug":"cwidgetstatsb","link":"#cwidgetstatsb","children":[]}],"filePathRelative":"api/widgets/CWidgetStatsB.api.md"}');
-export {
-  CWidgetStatsB_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CWidgetStatsC.api.html-BEjn1BPd.js b/vue/docs/assets/CWidgetStatsC.api.html-BEjn1BPd.js
new file mode 100644
index 00000000000..d168cb27f04
--- /dev/null
+++ b/vue/docs/assets/CWidgetStatsC.api.html-BEjn1BPd.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cwidgetstatsc" tabindex="-1">CWidgetStatsC <a class="anchor-link" href="#cwidgetstatsc">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CWidgetStatsC_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CWidgetStatsC.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/widgets/CWidgetStatsC.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/widgets/CWidgetStatsC.api.html"}]]},"headers":[{"level":3,"title":"CWidgetStatsC","slug":"cwidgetstatsc","link":"#cwidgetstatsc","children":[]}],"filePathRelative":"api/widgets/CWidgetStatsC.api.md"}');
+export {
+  CWidgetStatsC_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CWidgetStatsC.api.html-Ck65oxiQ.js b/vue/docs/assets/CWidgetStatsC.api.html-Ck65oxiQ.js
deleted file mode 100644
index 3d7516b55e7..00000000000
--- a/vue/docs/assets/CWidgetStatsC.api.html-Ck65oxiQ.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CWidgetStatsC_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CWidgetStatsC.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/widgets/CWidgetStatsC.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/widgets/CWidgetStatsC.api.html"}]]},"headers":[{"level":3,"title":"CWidgetStatsC","slug":"cwidgetstatsc","link":"#cwidgetstatsc","children":[]}],"filePathRelative":"api/widgets/CWidgetStatsC.api.md"}');
-export {
-  CWidgetStatsC_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CWidgetStatsD.api.html-C6jHMRVC.js b/vue/docs/assets/CWidgetStatsD.api.html-C6jHMRVC.js
deleted file mode 100644
index 91a8843fa22..00000000000
--- a/vue/docs/assets/CWidgetStatsD.api.html-C6jHMRVC.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CWidgetStatsD_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CWidgetStatsD.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/widgets/CWidgetStatsD.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/widgets/CWidgetStatsD.api.html"}]]},"headers":[{"level":3,"title":"CWidgetStatsD","slug":"cwidgetstatsd","link":"#cwidgetstatsd","children":[]}],"filePathRelative":"api/widgets/CWidgetStatsD.api.md"}');
-export {
-  CWidgetStatsD_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CWidgetStatsD.api.html-vMUwQLz_.js b/vue/docs/assets/CWidgetStatsD.api.html-vMUwQLz_.js
new file mode 100644
index 00000000000..0708cbe1f2d
--- /dev/null
+++ b/vue/docs/assets/CWidgetStatsD.api.html-vMUwQLz_.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cwidgetstatsd" tabindex="-1">CWidgetStatsD <a class="anchor-link" href="#cwidgetstatsd">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CWidgetStatsD_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CWidgetStatsD.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/widgets/CWidgetStatsD.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/widgets/CWidgetStatsD.api.html"}]]},"headers":[{"level":3,"title":"CWidgetStatsD","slug":"cwidgetstatsd","link":"#cwidgetstatsd","children":[]}],"filePathRelative":"api/widgets/CWidgetStatsD.api.md"}');
+export {
+  CWidgetStatsD_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CWidgetStatsE.api.html-8FNgCETA.js b/vue/docs/assets/CWidgetStatsE.api.html-8FNgCETA.js
new file mode 100644
index 00000000000..381ea44310e
--- /dev/null
+++ b/vue/docs/assets/CWidgetStatsE.api.html-8FNgCETA.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cwidgetstatse" tabindex="-1">CWidgetStatsE <a class="anchor-link" href="#cwidgetstatse">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CWidgetStatsE_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CWidgetStatsE.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/widgets/CWidgetStatsE.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/widgets/CWidgetStatsE.api.html"}]]},"headers":[{"level":3,"title":"CWidgetStatsE","slug":"cwidgetstatse","link":"#cwidgetstatse","children":[]}],"filePathRelative":"api/widgets/CWidgetStatsE.api.md"}');
+export {
+  CWidgetStatsE_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CWidgetStatsE.api.html-WqFr1dq3.js b/vue/docs/assets/CWidgetStatsE.api.html-WqFr1dq3.js
deleted file mode 100644
index 5e0628e6de5..00000000000
--- a/vue/docs/assets/CWidgetStatsE.api.html-WqFr1dq3.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CWidgetStatsE_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CWidgetStatsE.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/widgets/CWidgetStatsE.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/widgets/CWidgetStatsE.api.html"}]]},"headers":[{"level":3,"title":"CWidgetStatsE","slug":"cwidgetstatse","link":"#cwidgetstatse","children":[]}],"filePathRelative":"api/widgets/CWidgetStatsE.api.md"}');
-export {
-  CWidgetStatsE_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/CWidgetStatsF.api.html-Bs-3Tpfk.js b/vue/docs/assets/CWidgetStatsF.api.html-Bs-3Tpfk.js
new file mode 100644
index 00000000000..2fd3c8d7658
--- /dev/null
+++ b/vue/docs/assets/CWidgetStatsF.api.html-Bs-3Tpfk.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h3 id="cwidgetstatsf" tabindex="-1">CWidgetStatsF <a class="anchor-link" href="#cwidgetstatsf">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_7);
+}
+const CWidgetStatsF_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CWidgetStatsF.api.html.vue"]]);
+const data = JSON.parse('{"path":"/api/widgets/CWidgetStatsF.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/widgets/CWidgetStatsF.api.html"}]]},"headers":[{"level":3,"title":"CWidgetStatsF","slug":"cwidgetstatsf","link":"#cwidgetstatsf","children":[]}],"filePathRelative":"api/widgets/CWidgetStatsF.api.md"}');
+export {
+  CWidgetStatsF_api_html as comp,
+  data
+};
diff --git a/vue/docs/assets/CWidgetStatsF.api.html-DQOglbDZ.js b/vue/docs/assets/CWidgetStatsF.api.html-DQOglbDZ.js
deleted file mode 100644
index 0b4026165d2..00000000000
--- a/vue/docs/assets/CWidgetStatsF.api.html-DQOglbDZ.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-highlighter="prismjs" data-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_7);
-}
-const CWidgetStatsF_api_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "CWidgetStatsF.api.html.vue"]]);
-const data = JSON.parse('{"path":"/api/widgets/CWidgetStatsF.api.html","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/api/widgets/CWidgetStatsF.api.html"}]]},"headers":[{"level":3,"title":"CWidgetStatsF","slug":"cwidgetstatsf","link":"#cwidgetstatsf","children":[]}],"filePathRelative":"api/widgets/CWidgetStatsF.api.md"}');
-export {
-  CWidgetStatsF_api_html as comp,
-  data
-};
diff --git a/vue/docs/assets/Callout-BG7mA_TE.js b/vue/docs/assets/Callout-dZyg6Lm9.js
similarity index 83%
rename from vue/docs/assets/Callout-BG7mA_TE.js
rename to vue/docs/assets/Callout-dZyg6Lm9.js
index 06174a8a5ec..033d8631d2d 100644
--- a/vue/docs/assets/Callout-BG7mA_TE.js
+++ b/vue/docs/assets/Callout-dZyg6Lm9.js
@@ -1,4 +1,4 @@
-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";
+import { a0 as defineComponent, _ as _export_sfc, o as openBlock, c as createElementBlock, t as toDisplayString, W as createCommentVNode, ab as renderSlot, n as normalizeClass } from "./app-DGOUrGv-.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Callout",
   props: {
diff --git a/vue/docs/assets/ScssDocs-BzcEAHFR.js b/vue/docs/assets/ScssDocs-DPTK8YLD.js
similarity index 97%
rename from vue/docs/assets/ScssDocs-BzcEAHFR.js
rename to vue/docs/assets/ScssDocs-DPTK8YLD.js
index 22b028baa0a..6940e721e17 100644
--- a/vue/docs/assets/ScssDocs-BzcEAHFR.js
+++ b/vue/docs/assets/ScssDocs-DPTK8YLD.js
@@ -1,5 +1,5 @@
-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';
+import { a0 as defineComponent, _ as _export_sfc, o as openBlock, c as createElementBlock, b as createBaseVNode } from "./app-DGOUrGv-.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-collapse,\n    > .accordion-header .accordion-button,\n    > .accordion-header .accordion-button.collapsed {\n      @include border-radius(0);\n    }\n    // stylelint-enable selector-max-class\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
 //
@@ -72,9 +72,9 @@ const __vite_glob_0_1 = `//
 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_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  // The top 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-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  // 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_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  @include media-breakpoint-down(sm) {\n    &:not(:first-child) .calendar-nav {\n      border-top: var(--#{$prefix}calendar-nav-border);\n    }\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  flex-basis: min-content;\n\n  @include media-breakpoint-down(sm) {\n    flex-wrap: wrap;\n  }\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:
@@ -507,7 +507,7 @@ $_luminance-list: .0008 .001 .0011 .0013 .0015 .0017 .002 .0022 .0025 .0027 .003
   @return if($l1 > $l2, divide($l1 + .05, $l2 + .05), divide($l2 + .05, $l1 + .05));
 }
 
-// Return WCAG2.1 relative luminance
+// Return WCAG2.2 relative luminance
 // See https://www.w3.org/TR/WCAG/#dfn-relative-luminance
 // See https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
 @function luminance($color) {
@@ -914,7 +914,7 @@ const __vite_glob_0_37 = ':root,\n[data-coreui-theme="light"] {\n  // Note: Cust
 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';
 const __vite_glob_0_40 = "//\n// Basic Bootstrap table\n//\n\n.table {\n  // Reset needed for nesting tables\n  --#{$prefix}table-color-type: initial;\n  --#{$prefix}table-bg-type: initial;\n  --#{$prefix}table-color-state: initial;\n  --#{$prefix}table-bg-state: initial;\n  // End of reset\n  --#{$prefix}table-color: #{$table-color};\n  --#{$prefix}table-bg: #{$table-bg};\n  --#{$prefix}table-border-color: #{$table-border-color};\n  --#{$prefix}table-accent-bg: #{$table-accent-bg};\n  --#{$prefix}table-striped-color: #{$table-striped-color};\n  --#{$prefix}table-striped-bg: #{$table-striped-bg};\n  --#{$prefix}table-active-color: #{$table-active-color};\n  --#{$prefix}table-active-bg: #{$table-active-bg};\n  --#{$prefix}table-hover-color: #{$table-hover-color};\n  --#{$prefix}table-hover-bg: #{$table-hover-bg};\n\n  width: 100%;\n  margin-bottom: $spacer;\n  vertical-align: $table-cell-vertical-align;\n  border-color: var(--#{$prefix}table-border-color);\n\n  // Target th & td\n  // We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.\n  // We use the universal selectors here to simplify the selector (else we would need 6 different selectors).\n  // Another advantage is that this generates less code and makes the selector less specific making it easier to override.\n  // stylelint-disable-next-line selector-max-universal\n  > :not(caption) > * > * {\n    padding: $table-cell-padding-y $table-cell-padding-x;\n    // Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb\n    color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));\n    background-color: var(--#{$prefix}table-bg);\n    border-bottom-width: $table-border-width;\n    box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));\n  }\n\n  > tbody {\n    vertical-align: inherit;\n  }\n\n  > thead {\n    vertical-align: bottom;\n  }\n}\n\n.table-group-divider {\n  border-top: calc(#{$table-border-width} * 2) solid $table-group-separator-color; // stylelint-disable-line function-disallowed-list\n}\n\n//\n// Change placement of captions with a class\n//\n\n.caption-top {\n  caption-side: top;\n}\n\n\n//\n// Condensed table w/ half padding\n//\n\n.table-sm {\n  // stylelint-disable-next-line selector-max-universal\n  > :not(caption) > * > * {\n    padding: $table-cell-padding-y-sm $table-cell-padding-x-sm;\n  }\n}\n\n\n// Border versions\n//\n// Add or remove borders all around the table and between all the columns.\n//\n// When borders are added on all sides of the cells, the corners can render odd when\n// these borders do not have the same color or if they are semi-transparent.\n// Therefore we add top and border bottoms to the `tr`s and left and right borders\n// to the `td`s or `th`s\n\n.table-bordered {\n  > :not(caption) > * {\n    border-width: $table-border-width 0;\n\n    // stylelint-disable-next-line selector-max-universal\n    > * {\n      border-width: 0 $table-border-width;\n    }\n  }\n}\n\n.table-borderless {\n  // stylelint-disable-next-line selector-max-universal\n  > :not(caption) > * > * {\n    border-bottom-width: 0;\n  }\n\n  > :not(:first-child) {\n    border-top-width: 0;\n  }\n}\n\n// Zebra-striping\n//\n// Default zebra-stripe styles (alternating gray and transparent backgrounds)\n\n// For rows\n.table-striped {\n  > tbody > tr:nth-of-type(#{$table-striped-order}) > * {\n    --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);\n    --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);\n  }\n}\n\n// For columns\n.table-striped-columns {\n  > :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {\n    --#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);\n    --#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);\n  }\n}\n\n// Active table\n//\n// The `.table-active` class can be added to highlight rows or cells\n\n.table-active {\n  --#{$prefix}table-color-state: var(--#{$prefix}table-active-color);\n  --#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);\n}\n\n// Hover effect\n//\n// Placed here since it has to come after the potential zebra striping\n\n.table-hover {\n  > tbody > tr:hover > * {\n    --#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);\n    --#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);\n  }\n}\n\n\n// Table variants\n//\n// Table variants set the table cell backgrounds, border colors\n// and the colors of the striped, hovered & active tables\n\n@each $color, $value in $table-variants {\n  @include table-variant($color, $value);\n}\n\n// Responsive tables\n//\n// Generate series of `.table-responsive-*` classes for configuring the screen\n// size of where your table will overflow.\n\n@each $breakpoint in map-keys($grid-breakpoints) {\n  $infix: breakpoint-infix($breakpoint, $grid-breakpoints);\n\n  @include media-breakpoint-down($breakpoint) {\n    .table-responsive#{$infix} {\n      overflow-x: auto;\n      -webkit-overflow-scrolling: touch;\n    }\n  }\n}\n";
-const __vite_glob_0_41 = '.time-picker {\n  // scss-docs-start time-picker-css-vars\n  --#{$prefix}time-picker-zindex: #{$time-picker-zindex};\n  --#{$prefix}time-picker-font-family: #{$time-picker-font-family};\n  --#{$prefix}time-picker-font-size: #{$time-picker-font-size};\n  --#{$prefix}time-picker-font-weight: #{$time-picker-font-weight};\n  --#{$prefix}time-picker-line-height: #{$time-picker-line-height};\n  --#{$prefix}time-picker-color: #{$time-picker-color};\n  --#{$prefix}time-picker-bg: #{$time-picker-bg};\n  --#{$prefix}time-picker-box-shadow: #{$time-picker-box-shadow};\n  --#{$prefix}time-picker-border-width: #{$time-picker-border-width};\n  --#{$prefix}time-picker-border-color: #{$time-picker-border-color};\n  --#{$prefix}time-picker-border-radius: #{$time-picker-border-radius};\n  --#{$prefix}time-picker-disabled-color: #{$time-picker-disabled-color};\n  --#{$prefix}time-picker-disabled-bg: #{$time-picker-disabled-bg};\n  --#{$prefix}time-picker-disabled-border-color: #{$time-picker-disabled-border-color};\n  --#{$prefix}time-picker-focus-color: #{$time-picker-focus-color};\n  --#{$prefix}time-picker-focus-bg: #{$time-picker-focus-bg};\n  --#{$prefix}time-picker-focus-border-color: #{$time-picker-focus-border-color};\n  --#{$prefix}time-picker-focus-box-shadow: #{$time-picker-focus-box-shadow};\n  --#{$prefix}time-picker-placeholder-color: #{$time-picker-placeholder-color};\n  --#{$prefix}time-picker-padding-y: #{$time-picker-padding-y};\n  --#{$prefix}time-picker-padding-x: #{$time-picker-padding-x};\n  --#{$prefix}time-picker-indicator-icon: #{escape-svg($time-picker-indicator-icon)};\n  --#{$prefix}time-picker-indicator-icon-color: #{$time-picker-indicator-icon-color};\n  --#{$prefix}time-picker-indicator-icon-size: #{$time-picker-indicator-icon-size};\n  --#{$prefix}time-picker-cleaner-icon: #{escape-svg($time-picker-cleaner-icon)};\n  --#{$prefix}time-picker-cleaner-icon-color: #{$time-picker-cleaner-icon-color};\n  --#{$prefix}time-picker-cleaner-icon-hover-color: #{$time-picker-cleaner-icon-hover-color};\n  --#{$prefix}time-picker-cleaner-icon-size: #{$time-picker-cleaner-icon-size};\n  --#{$prefix}time-picker-body-padding: #{$time-picker-body-padding};\n  --#{$prefix}time-picker-footer-border-width: #{$time-picker-footer-border-width};\n  --#{$prefix}time-picker-footer-border-color: #{$time-picker-footer-border-color};\n  --#{$prefix}time-picker-footer-padding: #{$time-picker-footer-padding};\n  --#{$prefix}time-picker-dropdown-bg: #{$time-picker-dropdown-bg};\n  --#{$prefix}time-picker-dropdown-border-width: #{$time-picker-dropdown-border-width};\n  --#{$prefix}time-picker-dropdown-border-color: #{$time-picker-dropdown-border-color};\n  --#{$prefix}time-picker-dropdown-border-radius: #{$time-picker-dropdown-border-radius};\n  --#{$prefix}time-picker-dropdown-box-shadow: #{$time-picker-dropdown-box-shadow};\n  --#{$prefix}time-picker-roll-col-border-width: #{$time-picker-roll-col-border-width};\n  --#{$prefix}time-picker-roll-col-border-color: #{$time-picker-roll-col-border-color};\n  --#{$prefix}time-picker-roll-cell-selected-color: #{$time-picker-roll-cell-selected-color};\n  --#{$prefix}time-picker-roll-cell-selected-bg: #{$time-picker-roll-cell-selected-bg};\n  --#{$prefix}time-picker-inline-select-font-size: #{$time-picker-inline-select-font-size};\n  --#{$prefix}time-picker-inline-select-color: #{$time-picker-inline-select-color};\n  --#{$prefix}time-picker-inline-select-padding-y: #{$time-picker-inline-select-padding-y};\n  --#{$prefix}time-picker-inline-select-padding-x: #{$time-picker-inline-select-padding-x};\n  --#{$prefix}time-picker-inline-select-disabled-color: #{$time-picker-inline-select-disabled-color};\n  // scss-docs-end time-picker-css-vars\n\n  &.is-invalid {\n    --#{$prefix}time-picker-border-color: #{$time-picker-invalid-border-color} !important; // stylelint-disable-line declaration-no-important\n    --#{$prefix}time-picker-indicator-icon-color: #{$time-picker-indicator-invalid-icon-color} !important; // stylelint-disable-line declaration-no-important\n    --#{$prefix}time-picker-indicator-icon: #{escape-svg($time-picker-indicator-invalid-icon)} !important; // stylelint-disable-line declaration-no-important\n  }\n\n  &.is-valid {\n    --#{$prefix}time-picker-border-color: #{$time-picker-valid-border-color} !important; // stylelint-disable-line declaration-no-important\n    --#{$prefix}time-picker-indicator-icon-color: #{$time-picker-indicator-valid-icon-color} !important; // stylelint-disable-line declaration-no-important\n    --#{$prefix}time-picker-indicator-icon: #{escape-svg($time-picker-indicator-valid-icon)} !important; // stylelint-disable-line declaration-no-important\n  }\n}\n\n.time-picker-input-group {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  width: 100%;\n  background-color: var(--#{$prefix}time-picker-bg);\n  background-clip: padding-box;\n  border: var(--#{$prefix}time-picker-border-width) solid var(--#{$prefix}time-picker-border-color);\n  @include border-radius(var(--#{$prefix}time-picker-border-radius));\n\n  &:hover {\n    .time-picker-input:not(:placeholder-shown) {\n      ~ .time-picker-indicator:not(:last-child) {\n        display: none;\n      }\n      ~ .time-picker-cleaner {\n        display: flex;\n      }\n    }\n  }\n\n  .time-picker & {\n    @include transition($input-transition);\n  }\n\n  .time-picker.disabled & {\n    background-color: var(--#{$prefix}time-picker-disabled-bg);\n    border-color: var(--#{$prefix}time-picker-disabled-border-color);\n  }\n\n  .time-picker.show & {\n    background-color: var(--#{$prefix}time-picker-focus-bg);\n    border-color: var(--#{$prefix}time-picker-focus-border-color);\n    outline: 0;\n    @if $enable-shadows {\n      box-shadow: var(--#{$prefix}time-picker-box-shadow), var(--#{$prefix}time-picker-focus-box-shadow);\n    } @else {\n      box-shadow: var(--#{$prefix}time-picker-focus-box-shadow);\n    }\n  }\n}\n\n.time-picker-input {\n  position: relative;\n  flex: 1 1 auto;\n  width: 1%;\n  min-width: 0;\n  padding: var(--#{$prefix}time-picker-padding-y) var(--#{$prefix}time-picker-padding-x);\n  font-family: var(--#{$prefix}time-picker-font-family);\n  @include font-size(var(--#{$prefix}time-picker-font-size));\n  font-weight: var(--#{$prefix}time-picker-font-weight);\n  line-height: var(--#{$prefix}time-picker-line-height);\n  color: var(--#{$prefix}time-picker-color);\n  appearance: none;\n  background: transparent;\n  border: 0;\n\n  .time-picker.show & {\n    color: var(--#{$prefix}time-picker-focus-color);\n  }\n\n  &:disabled {\n    color: var(--#{$prefix}time-picker-disabled-color);\n  }\n\n  &:focus {\n    z-index: 5;\n    outline: 0;\n  }\n\n  &::placeholder {\n    color: var(--#{$prefix}time-picker-placeholder-color);\n    opacity: 1;\n  }\n\n  &.hover {\n    color: var(--#{$prefix}time-picker-placeholder-color);\n  }\n}\n\n.time-picker-cleaner,\n.time-picker-indicator {\n  position: relative;\n  width: 2.5rem;\n  background-repeat: no-repeat;\n  background-position: center;\n\n  &::before {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    content: "";\n  }\n}\n\n.time-picker-cleaner {\n  display: none;\n\n  &::before {\n    background-color: var(--#{$prefix}time-picker-cleaner-icon-color);\n    mask: var(--#{$prefix}time-picker-cleaner-icon) center / var(--#{$prefix}time-picker-cleaner-icon-size) no-repeat;\n  }\n\n  &:hover::before {\n    background-color: var(--#{$prefix}time-picker-cleaner-icon-hover-color);\n  }\n}\n\n.time-picker-indicator {\n  background-color: var(--#{$prefix}time-picker-indicator-icon-color);\n  mask: var(--#{$prefix}time-picker-indicator-icon) center / var(--#{$prefix}time-picker-indicator-icon-size) no-repeat;\n}\n\n.time-picker-dropdown {\n  position: absolute;\n  z-index: var(--#{$prefix}time-picker-zindex);\n  display: none;\n  width: min-content;\n  background-color: var(--#{$prefix}time-picker-dropdown-bg);\n  background-clip: padding-box;\n  border: var(--#{$prefix}time-picker-dropdown-border-width) solid var(--#{$prefix}time-picker-dropdown-border-color);\n  @include border-radius(var(--#{$prefix}time-picker-dropdown-border-radius));\n  @include box-shadow(var(--#{$prefix}time-picker-dropdown-box-shadow));\n  @include elevation(4);\n\n  .time-picker.show & {\n    display: block;\n  }\n}\n\n.time-picker-body {\n  display: flex;\n  align-items: center;\n  padding: var(--#{$prefix}time-picker-body-padding);\n}\n\n.time-picker-inline-icon {\n  display: block;\n  width: 2.5rem;\n  height: 1.25rem;\n  background-color: var(--#{$prefix}time-picker-indicator-icon-color);\n  mask: var(--#{$prefix}time-picker-indicator-icon) center / var(--#{$prefix}time-picker-indicator-icon-size) no-repeat;\n}\n\n.time-picker-inline-select {\n  padding: var(--#{$prefix}time-picker-inline-select-padding-y) var(--#{$prefix}time-picker-inline-select-padding-x);\n  color: var(--#{$prefix}time-picker-inline-select-color);\n  text-align: right;\n  appearance: none;\n  background-color: transparent;\n  border: 0;\n  @include font-size(var(--#{$prefix}time-picker-inline-select-font-size));\n\n  -ms-overflow-style: none;  /* Internet Explorer 10+ */\n  scrollbar-width: none;  /* Firefox */\n\n  &::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  // Remove outline from select box in FF\n  &:-moz-focusring {\n    color: transparent;\n    text-shadow: 0 0 0 var(--#{$prefix}time-picker-inline-select-color);\n  }\n\n  &:disabled {\n    color: var(--#{$prefix}time-picker-inline-select-disabled-color);\n  }\n}\n\n.time-picker-footer {\n  display: flex;\n  justify-content: flex-end;\n  padding: var(--#{$prefix}time-picker-footer-padding);\n  border-top: var(--#{$prefix}time-picker-footer-border-width) solid var(--#{$prefix}time-picker-footer-border-color);\n\n  .btn + .btn {\n    margin-inline-start: .5rem;\n  }\n}\n\n.time-picker-roll {\n  padding: 0;\n  overflow: hidden;\n  @include border-radius(inherit);\n}\n\n.time-picker-roll-col {\n  height: calc(8 * 32px); // stylelint-disable-line\n  overflow: scroll;\n\n  -ms-overflow-style: none;  /* Internet Explorer 10+ */\n  scrollbar-width: none;  /* Firefox */\n\n  &::-webkit-scrollbar {\n    display: none;  /* Safari and Chrome */\n  }\n\n  &:not(:last-child) {\n    border-right: var(--#{$prefix}time-picker-roll-col-border-width) solid var(--#{$prefix}time-picker-roll-col-border-color);\n  }\n}\n\n.time-picker-roll-cell {\n  width: 50px;\n  height: 32px;\n  padding: 0 $spacer 0 $spacer * .5;\n  line-height: 32px;\n\n  &.selected {\n    color: var(--#{$prefix}time-picker-roll-cell-selected-color);\n    background: var(--#{$prefix}time-picker-roll-cell-selected-bg);\n  }\n\n  &:last-child::after {\n    display: block;\n    height: calc(7 * 32px); // stylelint-disable-line\n    content: "";\n  }\n}\n\n.time-picker-sm {\n  --#{$prefix}time-picker-border-radius: #{$time-picker-border-radius-sm};\n  --#{$prefix}time-picker-padding-y: #{$time-picker-padding-y-sm};\n  --#{$prefix}time-picker-padding-x: #{$time-picker-padding-x-sm};\n  --#{$prefix}time-picker-cleaner-icon-size: #{$time-picker-cleaner-icon-size-sm};\n  --#{$prefix}time-picker-indicator-icon-size: #{$time-picker-indicator-icon-size-sm};\n}\n\n.time-picker-lg {\n  --#{$prefix}time-picker-border-radius: #{$time-picker-border-radius-lg};\n  --#{$prefix}time-picker-padding-y: #{$time-picker-padding-y-lg};\n  --#{$prefix}time-picker-padding-x: #{$time-picker-padding-x-lg};\n  --#{$prefix}time-picker-cleaner-icon-size: #{$time-picker-cleaner-icon-size-lg};\n  --#{$prefix}time-picker-indicator-icon-size: #{$time-picker-indicator-icon-size-lg};\n}\n';
+const __vite_glob_0_41 = '.time-picker {\n  // scss-docs-start time-picker-css-vars\n  --#{$prefix}time-picker-zindex: #{$time-picker-zindex};\n  --#{$prefix}time-picker-font-family: #{$time-picker-font-family};\n  --#{$prefix}time-picker-font-size: #{$time-picker-font-size};\n  --#{$prefix}time-picker-font-weight: #{$time-picker-font-weight};\n  --#{$prefix}time-picker-line-height: #{$time-picker-line-height};\n  --#{$prefix}time-picker-color: #{$time-picker-color};\n  --#{$prefix}time-picker-bg: #{$time-picker-bg};\n  --#{$prefix}time-picker-box-shadow: #{$time-picker-box-shadow};\n  --#{$prefix}time-picker-border-width: #{$time-picker-border-width};\n  --#{$prefix}time-picker-border-color: #{$time-picker-border-color};\n  --#{$prefix}time-picker-border-radius: #{$time-picker-border-radius};\n  --#{$prefix}time-picker-disabled-color: #{$time-picker-disabled-color};\n  --#{$prefix}time-picker-disabled-bg: #{$time-picker-disabled-bg};\n  --#{$prefix}time-picker-disabled-border-color: #{$time-picker-disabled-border-color};\n  --#{$prefix}time-picker-focus-color: #{$time-picker-focus-color};\n  --#{$prefix}time-picker-focus-bg: #{$time-picker-focus-bg};\n  --#{$prefix}time-picker-focus-border-color: #{$time-picker-focus-border-color};\n  --#{$prefix}time-picker-focus-box-shadow: #{$time-picker-focus-box-shadow};\n  --#{$prefix}time-picker-placeholder-color: #{$time-picker-placeholder-color};\n  --#{$prefix}time-picker-padding-y: #{$time-picker-padding-y};\n  --#{$prefix}time-picker-padding-x: #{$time-picker-padding-x};\n  --#{$prefix}time-picker-indicator-icon: #{escape-svg($time-picker-indicator-icon)};\n  --#{$prefix}time-picker-indicator-icon-color: #{$time-picker-indicator-icon-color};\n  --#{$prefix}time-picker-indicator-icon-size: #{$time-picker-indicator-icon-size};\n  --#{$prefix}time-picker-cleaner-icon: #{escape-svg($time-picker-cleaner-icon)};\n  --#{$prefix}time-picker-cleaner-icon-color: #{$time-picker-cleaner-icon-color};\n  --#{$prefix}time-picker-cleaner-icon-hover-color: #{$time-picker-cleaner-icon-hover-color};\n  --#{$prefix}time-picker-cleaner-icon-size: #{$time-picker-cleaner-icon-size};\n  --#{$prefix}time-picker-body-padding: #{$time-picker-body-padding};\n  --#{$prefix}time-picker-footer-border-width: #{$time-picker-footer-border-width};\n  --#{$prefix}time-picker-footer-border-color: #{$time-picker-footer-border-color};\n  --#{$prefix}time-picker-footer-padding: #{$time-picker-footer-padding};\n  --#{$prefix}time-picker-dropdown-bg: #{$time-picker-dropdown-bg};\n  --#{$prefix}time-picker-dropdown-border-width: #{$time-picker-dropdown-border-width};\n  --#{$prefix}time-picker-dropdown-border-color: #{$time-picker-dropdown-border-color};\n  --#{$prefix}time-picker-dropdown-border-radius: #{$time-picker-dropdown-border-radius};\n  --#{$prefix}time-picker-dropdown-box-shadow: #{$time-picker-dropdown-box-shadow};\n  --#{$prefix}time-picker-roll-col-border-width: #{$time-picker-roll-col-border-width};\n  --#{$prefix}time-picker-roll-col-border-color: #{$time-picker-roll-col-border-color};\n  --#{$prefix}time-picker-roll-cell-selected-color: #{$time-picker-roll-cell-selected-color};\n  --#{$prefix}time-picker-roll-cell-selected-bg: #{$time-picker-roll-cell-selected-bg};\n  --#{$prefix}time-picker-inline-select-font-size: #{$time-picker-inline-select-font-size};\n  --#{$prefix}time-picker-inline-select-color: #{$time-picker-inline-select-color};\n  --#{$prefix}time-picker-inline-select-padding-y: #{$time-picker-inline-select-padding-y};\n  --#{$prefix}time-picker-inline-select-padding-x: #{$time-picker-inline-select-padding-x};\n  --#{$prefix}time-picker-inline-select-disabled-color: #{$time-picker-inline-select-disabled-color};\n  // scss-docs-end time-picker-css-vars\n\n  &.is-invalid {\n    --#{$prefix}time-picker-border-color: #{$time-picker-invalid-border-color} !important; // stylelint-disable-line declaration-no-important\n    --#{$prefix}time-picker-indicator-icon-color: #{$time-picker-indicator-invalid-icon-color} !important; // stylelint-disable-line declaration-no-important\n    --#{$prefix}time-picker-indicator-icon: #{escape-svg($time-picker-indicator-invalid-icon)} !important; // stylelint-disable-line declaration-no-important\n  }\n\n  &.is-valid {\n    --#{$prefix}time-picker-border-color: #{$time-picker-valid-border-color} !important; // stylelint-disable-line declaration-no-important\n    --#{$prefix}time-picker-indicator-icon-color: #{$time-picker-indicator-valid-icon-color} !important; // stylelint-disable-line declaration-no-important\n    --#{$prefix}time-picker-indicator-icon: #{escape-svg($time-picker-indicator-valid-icon)} !important; // stylelint-disable-line declaration-no-important\n  }\n}\n\n.time-picker-input-group {\n  position: relative;\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  width: 100%;\n  background-color: var(--#{$prefix}time-picker-bg);\n  background-clip: padding-box;\n  border: var(--#{$prefix}time-picker-border-width) solid var(--#{$prefix}time-picker-border-color);\n  @include border-radius(var(--#{$prefix}time-picker-border-radius));\n\n  &:hover {\n    .time-picker-input:not(:placeholder-shown) {\n      ~ .time-picker-indicator:not(:last-child) {\n        display: none;\n      }\n      ~ .time-picker-cleaner {\n        display: flex;\n      }\n    }\n  }\n\n  .time-picker & {\n    @include transition($input-transition);\n  }\n\n  .time-picker.disabled & {\n    background-color: var(--#{$prefix}time-picker-disabled-bg);\n    border-color: var(--#{$prefix}time-picker-disabled-border-color);\n  }\n\n  .time-picker.show & {\n    background-color: var(--#{$prefix}time-picker-focus-bg);\n    border-color: var(--#{$prefix}time-picker-focus-border-color);\n    outline: 0;\n    @if $enable-shadows {\n      box-shadow: var(--#{$prefix}time-picker-box-shadow), var(--#{$prefix}time-picker-focus-box-shadow);\n    } @else {\n      box-shadow: var(--#{$prefix}time-picker-focus-box-shadow);\n    }\n  }\n}\n\n.time-picker-input {\n  position: relative;\n  flex: 1 1 auto;\n  width: 1%;\n  min-width: 0;\n  padding: var(--#{$prefix}time-picker-padding-y) var(--#{$prefix}time-picker-padding-x);\n  font-family: var(--#{$prefix}time-picker-font-family);\n  @include font-size(var(--#{$prefix}time-picker-font-size));\n  font-weight: var(--#{$prefix}time-picker-font-weight);\n  line-height: var(--#{$prefix}time-picker-line-height);\n  color: var(--#{$prefix}time-picker-color);\n  appearance: none;\n  background: transparent;\n  border: 0;\n\n  .time-picker.show & {\n    color: var(--#{$prefix}time-picker-focus-color);\n  }\n\n  &:disabled {\n    color: var(--#{$prefix}time-picker-disabled-color);\n  }\n\n  &:focus {\n    z-index: 5;\n    outline: 0;\n  }\n\n  &::placeholder {\n    color: var(--#{$prefix}time-picker-placeholder-color);\n    opacity: 1;\n  }\n\n  &.hover {\n    color: var(--#{$prefix}time-picker-placeholder-color);\n  }\n}\n\n.time-picker-cleaner,\n.time-picker-indicator {\n  position: relative;\n  width: 2.5rem;\n  background-repeat: no-repeat;\n  background-position: center;\n\n  &::before {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    content: "";\n  }\n}\n\n.time-picker-cleaner {\n  display: none;\n\n  &::before {\n    background-color: var(--#{$prefix}time-picker-cleaner-icon-color);\n    mask: var(--#{$prefix}time-picker-cleaner-icon) center / var(--#{$prefix}time-picker-cleaner-icon-size) no-repeat;\n  }\n\n  &:hover::before {\n    background-color: var(--#{$prefix}time-picker-cleaner-icon-hover-color);\n  }\n}\n\n.time-picker-indicator {\n  background-color: var(--#{$prefix}time-picker-indicator-icon-color);\n  mask: var(--#{$prefix}time-picker-indicator-icon) center / var(--#{$prefix}time-picker-indicator-icon-size) no-repeat;\n}\n\n.time-picker-dropdown {\n  position: absolute;\n  z-index: var(--#{$prefix}time-picker-zindex);\n  display: none;\n  width: min-content;\n  background-color: var(--#{$prefix}time-picker-dropdown-bg);\n  background-clip: padding-box;\n  border: var(--#{$prefix}time-picker-dropdown-border-width) solid var(--#{$prefix}time-picker-dropdown-border-color);\n  @include border-radius(var(--#{$prefix}time-picker-dropdown-border-radius));\n  @include box-shadow(var(--#{$prefix}time-picker-dropdown-box-shadow));\n  @include elevation(4);\n\n  .time-picker.show & {\n    display: block;\n  }\n}\n\n.time-picker-body {\n  display: flex;\n  align-items: center;\n  padding: var(--#{$prefix}time-picker-body-padding);\n}\n\n.time-picker-inline-icon {\n  display: block;\n  width: 2.5rem;\n  height: 1.25rem;\n  background-color: var(--#{$prefix}time-picker-indicator-icon-color);\n  mask: var(--#{$prefix}time-picker-indicator-icon) center / var(--#{$prefix}time-picker-indicator-icon-size) no-repeat;\n}\n\n.time-picker-inline-select {\n  padding: var(--#{$prefix}time-picker-inline-select-padding-y) var(--#{$prefix}time-picker-inline-select-padding-x);\n  color: var(--#{$prefix}time-picker-inline-select-color);\n  text-align: right;\n  appearance: none;\n  scrollbar-width: none;  /* Firefox */\n  background-color: transparent;\n  border: 0;\n  @include font-size(var(--#{$prefix}time-picker-inline-select-font-size));\n\n  -ms-overflow-style: none;  /* Internet Explorer 10+ */\n\n  &::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  // Remove outline from select box in FF\n  &:-moz-focusring {\n    color: transparent;\n    text-shadow: 0 0 0 var(--#{$prefix}time-picker-inline-select-color);\n  }\n\n  &:disabled {\n    color: var(--#{$prefix}time-picker-inline-select-disabled-color);\n  }\n}\n\n.time-picker-footer {\n  display: flex;\n  justify-content: flex-end;\n  padding: var(--#{$prefix}time-picker-footer-padding);\n  border-top: var(--#{$prefix}time-picker-footer-border-width) solid var(--#{$prefix}time-picker-footer-border-color);\n\n  .btn + .btn {\n    margin-inline-start: .5rem;\n  }\n}\n\n.time-picker-roll {\n  padding: 0;\n  overflow: hidden;\n  @include border-radius(inherit);\n}\n\n.time-picker-roll-col {\n  height: calc(8 * 32px); // stylelint-disable-line\n  overflow: scroll;\n\n  -ms-overflow-style: none;  /* Internet Explorer 10+ */\n  scrollbar-width: none;  /* Firefox */\n\n  &::-webkit-scrollbar {\n    display: none;  /* Safari and Chrome */\n  }\n\n  &:not(:last-child) {\n    border-right: var(--#{$prefix}time-picker-roll-col-border-width) solid var(--#{$prefix}time-picker-roll-col-border-color);\n  }\n}\n\n.time-picker-roll-cell {\n  width: 50px;\n  height: 32px;\n  padding: 0 $spacer 0 $spacer * .5;\n  line-height: 32px;\n\n  &.selected {\n    color: var(--#{$prefix}time-picker-roll-cell-selected-color);\n    background: var(--#{$prefix}time-picker-roll-cell-selected-bg);\n  }\n\n  &:last-child::after {\n    display: block;\n    height: calc(7 * 32px); // stylelint-disable-line\n    content: "";\n  }\n}\n\n.time-picker-sm {\n  --#{$prefix}time-picker-border-radius: #{$time-picker-border-radius-sm};\n  --#{$prefix}time-picker-padding-y: #{$time-picker-padding-y-sm};\n  --#{$prefix}time-picker-padding-x: #{$time-picker-padding-x-sm};\n  --#{$prefix}time-picker-cleaner-icon-size: #{$time-picker-cleaner-icon-size-sm};\n  --#{$prefix}time-picker-indicator-icon-size: #{$time-picker-indicator-icon-size-sm};\n}\n\n.time-picker-lg {\n  --#{$prefix}time-picker-border-radius: #{$time-picker-border-radius-lg};\n  --#{$prefix}time-picker-padding-y: #{$time-picker-padding-y-lg};\n  --#{$prefix}time-picker-padding-x: #{$time-picker-padding-x-lg};\n  --#{$prefix}time-picker-cleaner-icon-size: #{$time-picker-cleaner-icon-size-lg};\n  --#{$prefix}time-picker-indicator-icon-size: #{$time-picker-indicator-icon-size-lg};\n}\n';
 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";
@@ -1118,8 +1118,8 @@ $form-invalid-border-color-dark:    $red-300 !default;
 $accordion-icon-color-dark:         $body-color-dark !default;
 $accordion-icon-active-color-dark:  $primary-text-emphasis-dark !default;
 
-$accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
-$accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
+$accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
 
 
 //
@@ -1226,7 +1226,7 @@ $colors: (
 // scss-docs-end colors-map
 
 // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
-// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+// See https://www.w3.org/TR/WCAG/#contrast-minimum
 $min-contrast-ratio:   4.5 !default;
 
 // Customize the light and dark text colors for use in our color contrast function.
@@ -2514,7 +2514,7 @@ $form-feedback-valid-color:         $success !default;
 $form-feedback-invalid-color:       $danger !default;
 
 $form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
-$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>") !default;
+$form-feedback-icon-valid:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/></svg>") !default;
 $form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
 $form-feedback-icon-invalid:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='#{$form-feedback-icon-invalid-color}'><circle cx='6' cy='6' r='4.5'/><path stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/><circle cx='6' cy='8.2' r='.6' fill='#{$form-feedback-icon-invalid-color}' stroke='none'/></svg>") !default;
 // scss-docs-end form-feedback-variables
@@ -2828,8 +2828,8 @@ $accordion-icon-active-color:             $primary-text-emphasis !default;
 $accordion-icon-transition:               transform .2s ease-in-out !default;
 $accordion-icon-transform:                rotate(-180deg) !default;
 
-$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5L8 11L14 5'/></svg>") !default;
-$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='M2 5L8 11L14 5'/></svg>") !default;
+$accordion-button-icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
+$accordion-button-active-icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='#{$accordion-icon-active-color}' stroke-linecap='round' stroke-linejoin='round'><path d='m2 5 6 6 6-6'/></svg>") !default;
 // scss-docs-end accordion-variables
 
 // Tooltips
@@ -3228,8 +3228,8 @@ $carousel-caption-spacer:            1.25rem !default;
 
 $carousel-control-icon-width:        2rem !default;
 
-$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/></svg>") !default;
-$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$carousel-control-prev-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/></svg>") !default;
+$carousel-control-next-icon-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$carousel-control-color}'><path d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>") !default;
 
 $carousel-transition-duration:       .6s !default;
 $carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., \`transform 2s ease, opacity .5s ease-out\`)
@@ -3326,7 +3326,7 @@ $sidebar-nav-group-items-padding-x:           0 !default;
 $sidebar-nav-group-items-transition:          height .15s ease !default;
 
 $sidebar-nav-group-indicator-color:           var(--#{$prefix}tertiary-color) !default;
-$sidebar-nav-group-indicator-icon:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$sidebar-nav-group-indicator-icon:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
 $sidebar-nav-group-indicator-hover-color:     $sidebar-nav-link-hover-color !default;
 $sidebar-nav-group-indicator-hover-icon:      $sidebar-nav-group-indicator-icon !default;
 $sidebar-nav-group-indicator-transition:      transform .15s !default;
@@ -3380,7 +3380,7 @@ $btn-close-height:           $btn-close-width !default;
 $btn-close-padding-x:        .25em !default;
 $btn-close-padding-y:        $btn-close-padding-x !default;
 $btn-close-color:            $black !default;
-$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
+$btn-close-bg:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/></svg>") !default;
 $btn-close-focus-shadow:     $focus-ring-box-shadow !default;
 $btn-close-opacity:          .5 !default;
 $btn-close-hover-opacity:    .75 !default;
@@ -3650,7 +3650,7 @@ const __vite_glob_0_53 = '$enable-ltr: false !default;\n$enable-rtl: true !defau
 const __vite_glob_0_54 = '@import "mixins/banner";\n@include bsBanner(Utilities);\n\n// Configuration\n@import "functions";\n@import "variables";\n@import "variables-dark";\n@import "maps";\n@import "mixins";\n@import "utilities";\n\n// Layout & components\n@import "root";\n\n// Helpers\n@import "helpers";\n\n// Utilities\n@import "utilities/api";\n';
 const __vite_glob_0_55 = '$enable-ltr: false !default;\n$enable-rtl: true !default;\n\n@import "coreui";\n';
 const __vite_glob_0_56 = '@import "mixins/banner";\n@include bsBanner("");\n\n// scss-docs-start import-stack\n// Configuration\n@import "functions";\n@import "variables";\n@import "variables-dark";\n@import "maps";\n@import "mixins";\n@import "utilities";\n\n// Layout & components\n@import "root";\n@import "reboot";\n@import "type";\n@import "images";\n@import "containers";\n@import "grid";\n@import "tables";\n@import "forms";\n@import "buttons";\n@import "loading-button";\n@import "transitions";\n@import "dropdown";\n@import "button-group";\n@import "nav";\n@import "navbar";\n@import "card";\n@import "accordion";\n@import "breadcrumb";\n@import "pagination";\n@import "badge";\n@import "alert";\n@import "progress";\n@import "list-group";\n@import "close";\n@import "toasts";\n@import "modal";\n@import "tooltip";\n@import "popover";\n@import "carousel";\n@import "spinners";\n@import "offcanvas";\n@import "placeholders";\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 "rating";\n@import "sidebar";\n@import "time-picker";\n\n// Helpers\n@import "helpers";\n\n// Utilities\n@import "utilities/api";\n@import "utilities/bg-gradients";\n// scss-docs-end import-stack\n';
-const __vite_glob_0_57 = '.form-floating {\n  position: relative;\n\n  > .form-control,\n  > .form-control-plaintext,\n  > .form-select {\n    height: $form-floating-height;\n    min-height: $form-floating-height;\n    line-height: $form-floating-line-height;\n  }\n\n  > label {\n    position: absolute;\n    top: 0;\n    @include ltr-rtl("left", 0);\n    z-index: 2;\n    height: 100%; // allow textareas\n    padding: $form-floating-padding-y $form-floating-padding-x;\n    overflow: hidden;\n    text-align: start;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    pointer-events: none;\n    border: $input-border-width solid transparent; // Required for aligning label\'s text with the input as it affects inner box model\n    transform-origin: 0 0;\n    @include transition($form-floating-transition);\n  }\n\n  > .form-control,\n  > .form-control-plaintext {\n    padding: $form-floating-padding-y $form-floating-padding-x;\n\n    &::placeholder {\n      color: transparent;\n    }\n\n    &:focus,\n    &:not(:placeholder-shown) {\n      padding-top: $form-floating-input-padding-t;\n      padding-bottom: $form-floating-input-padding-b;\n    }\n    // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped\n    &:-webkit-autofill {\n      padding-top: $form-floating-input-padding-t;\n      padding-bottom: $form-floating-input-padding-b;\n    }\n  }\n\n  > .form-select {\n    padding-top: $form-floating-input-padding-t;\n    padding-bottom: $form-floating-input-padding-b;\n  }\n\n  > .form-control:focus,\n  > .form-control:not(:placeholder-shown),\n  > .form-control-plaintext,\n  > .form-select {\n    ~ label {\n      color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});\n      transform: $form-floating-label-transform;\n\n      &::after {\n        position: absolute;\n        inset: $form-floating-padding-y ($form-floating-padding-x * .5);\n        z-index: -1;\n        height: $form-floating-label-height;\n        content: "";\n        background-color: $input-bg;\n        @include border-radius($input-border-radius);\n      }\n    }\n  }\n  // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped\n  > .form-control:-webkit-autofill {\n    ~ label {\n      color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});\n      transform: $form-floating-label-transform;\n    }\n  }\n\n  > .form-control-plaintext {\n    ~ label {\n      border-width: $input-border-width 0; // Required to properly position label text - as explained above\n    }\n  }\n\n  > :disabled ~ label,\n  > .form-control:disabled ~ label { // Required for `.form-control`s because of specificity\n    color: $form-floating-label-disabled-color;\n\n    &::after {\n      background-color: $input-disabled-bg;\n    }\n  }\n}\n';
+const __vite_glob_0_57 = '.form-floating {\n  position: relative;\n\n  > .form-control,\n  > .form-control-plaintext,\n  > .form-select {\n    height: $form-floating-height;\n    min-height: $form-floating-height;\n    line-height: $form-floating-line-height;\n  }\n\n  > label {\n    position: absolute;\n    top: 0;\n    @include ltr-rtl("left", 0);\n    z-index: 2;\n    max-width: 100%;\n    height: 100%; // allow textareas\n    padding: $form-floating-padding-y $form-floating-padding-x;\n    overflow: hidden;\n    color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});\n    text-align: start;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    pointer-events: none;\n    border: $input-border-width solid transparent; // Required for aligning label\'s text with the input as it affects inner box model\n    transform-origin: 0 0;\n    @include transition($form-floating-transition);\n  }\n\n  > .form-control,\n  > .form-control-plaintext {\n    padding: $form-floating-padding-y $form-floating-padding-x;\n\n    &::placeholder {\n      color: transparent;\n    }\n\n    &:focus,\n    &:not(:placeholder-shown) {\n      padding-top: $form-floating-input-padding-t;\n      padding-bottom: $form-floating-input-padding-b;\n    }\n    // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped\n    &:-webkit-autofill {\n      padding-top: $form-floating-input-padding-t;\n      padding-bottom: $form-floating-input-padding-b;\n    }\n  }\n\n  > .form-select {\n    padding-top: $form-floating-input-padding-t;\n    padding-bottom: $form-floating-input-padding-b;\n  }\n\n  > .form-control:focus,\n  > .form-control:not(:placeholder-shown),\n  > .form-control-plaintext,\n  > .form-select {\n    ~ label {\n      transform: $form-floating-label-transform;\n    }\n  }\n  // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped\n  > .form-control:-webkit-autofill {\n    ~ label {\n      transform: $form-floating-label-transform;\n    }\n  }\n  > textarea:focus,\n  > textarea:not(:placeholder-shown) {\n    ~ label::after {\n      position: absolute;\n      inset: $form-floating-padding-y ($form-floating-padding-x * .5);\n      z-index: -1;\n      height: $form-floating-label-height;\n      content: "";\n      background-color: $input-bg;\n      @include border-radius($input-border-radius);\n    }\n  }\n  > textarea:disabled ~ label::after {\n    background-color: $input-disabled-bg;\n  }\n\n  > .form-control-plaintext {\n    ~ label {\n      border-width: $input-border-width 0; // Required to properly position label text - as explained above\n    }\n  }\n\n  > :disabled ~ label,\n  > .form-control:disabled ~ label { // Required for `.form-control`s because of specificity\n    color: $form-floating-label-disabled-color;\n  }\n}\n';
 const __vite_glob_0_58 = '//\n// Check/radio\n//\n\n.form-check {\n  display: block;\n  min-height: $form-check-min-height;\n  @include ltr-rtl("padding-left", $form-check-padding-start);\n  margin-bottom: $form-check-margin-bottom;\n\n  .form-check-input {\n    @include ltr-rtl("float", left);\n    @include ltr-rtl("margin-left", $form-check-padding-start * -1);\n  }\n}\n\n.form-check-reverse {\n  @include ltr-rtl("padding-right", $form-check-padding-start);\n  @include ltr-rtl("padding-left", 0);\n  @include ltr-rtl("text-align", right);\n\n  .form-check-input {\n    @include ltr-rtl("float", right);\n    @include ltr-rtl("margin-right", $form-check-padding-start * -1);\n    @include ltr-rtl("margin-left", 0);\n  }\n}\n\n.form-check-input {\n  --#{$prefix}form-check-bg: #{$form-check-input-bg};\n\n  flex-shrink: 0;\n  width: $form-check-input-width;\n  height: $form-check-input-width;\n  margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height\n  vertical-align: top;\n  appearance: none;\n  background-color: var(--#{$prefix}form-check-bg);\n  background-image: var(--#{$prefix}form-check-bg-image);\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n  border: $form-check-input-border;\n  print-color-adjust: exact; // Keep themed appearance for print\n  @include transition($form-check-transition);\n\n  &[type="checkbox"] {\n    @include border-radius($form-check-input-border-radius);\n  }\n\n  &[type="radio"] {\n    // stylelint-disable-next-line property-disallowed-list\n    border-radius: $form-check-radio-border-radius;\n  }\n\n  &:active {\n    filter: $form-check-input-active-filter;\n  }\n\n  &:focus {\n    border-color: $form-check-input-focus-border;\n    outline: 0;\n    box-shadow: $form-check-input-focus-box-shadow;\n  }\n\n  &:checked {\n    background-color: var(--#{$prefix}form-check-input-checked-bg-color, $form-check-input-checked-bg-color);\n    border-color: var(--#{$prefix}form-check-input-checked-border-color, $form-check-input-checked-border-color);\n\n    &[type="checkbox"] {\n      @if $enable-gradients {\n        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);\n      } @else {\n        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};\n      }\n    }\n\n    &[type="radio"] {\n      @if $enable-gradients {\n        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);\n      } @else {\n        --#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};\n      }\n    }\n  }\n\n  &[type="checkbox"]:indeterminate {\n    background-color: $form-check-input-indeterminate-bg-color;\n    border-color: $form-check-input-indeterminate-border-color;\n\n    @if $enable-gradients {\n      --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);\n    } @else {\n      --#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};\n    }\n  }\n\n  &:disabled {\n    pointer-events: none;\n    filter: none;\n    opacity: $form-check-input-disabled-opacity;\n  }\n\n  // Use disabled attribute in addition of :disabled pseudo-class\n  // See: https://github.com/twbs/bootstrap/issues/28247\n  &[disabled],\n  &:disabled {\n    ~ .form-check-label {\n      cursor: default;\n      opacity: $form-check-label-disabled-opacity;\n    }\n  }\n}\n\n.form-check-label {\n  color: var(--#{$prefix}form-check-label-color, $form-check-label-color);\n  cursor: $form-check-label-cursor;\n}\n\n//\n// Switch\n//\n\n.form-switch {\n  @include ltr-rtl("padding-left", $form-switch-padding-start);\n\n  .form-check-input {\n    --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};\n\n    width: $form-switch-width;\n    @include ltr-rtl("margin-left", $form-switch-padding-start * -1);\n    background-image: var(--#{$prefix}form-switch-bg);\n    background-position: left center;\n    @include border-radius($form-switch-border-radius, 0);\n    @include transition($form-switch-transition);\n\n    &:focus {\n      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};\n    }\n\n    &:checked {\n      background-position: $form-switch-checked-bg-position;\n\n      @if $enable-gradients {\n        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);\n      } @else {\n        --#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};\n      }\n    }\n  }\n\n  &.form-check-reverse {\n    @include ltr-rtl("padding-right", $form-check-padding-start);\n    @include ltr-rtl("padding-left", 0);\n\n    .form-check-input {\n      @include ltr-rtl("margin-right", $form-check-padding-start * -1);\n      @include ltr-rtl("margin-left", 0);\n    }\n  }\n}\n\n@each $size, $map in $form-switch-widths {\n  $width: map-get($map, "width");\n  $height: map-get($map, "height");\n\n  .form-switch-#{$size} {\n    min-height: $height;\n    @include ltr-rtl("padding-left", $width + .5em);\n\n    .form-check-input {\n      width: $width;\n      height: $height;\n      @include ltr-rtl("margin-left", ($width + .5em) * -1);\n    }\n\n    .form-check-label {\n      // stylelint-disable-next-line function-disallowed-list\n      padding-top: calc((#{$height} - #{$font-size-base}) / 2);\n    }\n  }\n}\n\n.form-check-inline {\n  display: inline-block;\n  @include ltr-rtl("margin-right", $form-check-inline-margin-end);\n}\n\n.btn-check {\n  position: absolute;\n  clip: rect(0, 0, 0, 0);\n  pointer-events: none;\n\n  &[disabled],\n  &:disabled {\n    + .btn {\n      pointer-events: none;\n      filter: none;\n      opacity: $form-check-btn-check-disabled-opacity;\n    }\n  }\n}\n\n@if $enable-dark-mode {\n  @include color-mode(dark) {\n    .form-switch .form-check-input:not(:checked):not(:focus) {\n      --#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};\n    }\n  }\n}\n';
 const __vite_glob_0_59 = '//\n// General form controls (plus a few specific high-level interventions)\n//\n\n.form-control {\n  display: block;\n  width: 100%;\n  padding: $input-padding-y $input-padding-x;\n  font-family: $input-font-family;\n  @include font-size($input-font-size);\n  font-weight: $input-font-weight;\n  line-height: $input-line-height;\n  color: $input-color;\n  appearance: none; // Fix appearance for date inputs in Safari\n  background-color: $input-bg;\n  background-clip: padding-box;\n  border: $input-border-width solid $input-border-color;\n\n  // Note: This has no effect on <select>s in some browsers, due to the limited stylability of `<select>`s in CSS.\n  @include border-radius($input-border-radius, 0);\n\n  @include box-shadow($input-box-shadow);\n  @include transition($input-transition);\n\n  &[type="file"] {\n    overflow: hidden; // prevent pseudo element button overlap\n\n    &:not(:disabled):not([readonly]) {\n      cursor: pointer;\n    }\n  }\n\n  // Customize the `:focus` state to imitate native WebKit styles.\n  &:focus {\n    color: $input-focus-color;\n    background-color: $input-focus-bg;\n    border-color: $input-focus-border-color;\n    outline: 0;\n    @if $enable-shadows {\n      @include box-shadow($input-box-shadow, $input-focus-box-shadow);\n    } @else {\n      // Avoid using mixin so we can pass custom focus shadow properly\n      box-shadow: $input-focus-box-shadow;\n    }\n  }\n\n  &::-webkit-date-and-time-value {\n    // On Android Chrome, form-control\'s "width: 100%" makes the input width too small\n    // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109\n    //\n    // On iOS Safari, form-control\'s "appearance: none" + "width: 100%" makes the input width too small\n    // Tested under iOS 16.2 / Safari 16.2\n    min-width: 85px; // Seems to be a good minimum safe width\n\n    // Add some height to date inputs on iOS\n    // https://github.com/twbs/bootstrap/issues/23307\n    // TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved\n    // Multiply line-height by 1em if it has no unit\n    height: if(unit($input-line-height) == "", $input-line-height * 1em, $input-line-height);\n\n    // Android Chrome type="date" is taller than the other inputs\n    // because of "margin: 1px 24px 1px 4px" inside the shadow DOM\n    // Tested under Android 11 / Chrome 89, Android 12 / Chrome 100, Android 13 / Chrome 109\n    margin: 0;\n  }\n\n  // Prevent excessive date input height in Webkit\n  // https://github.com/twbs/bootstrap/issues/34433\n  &::-webkit-datetime-edit {\n    display: block;\n    padding: 0;\n  }\n\n  // Placeholder\n  &::placeholder {\n    color: var(--#{$prefix}input-placeholder-color, $input-placeholder-color);\n    // Override Firefox\'s unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.\n    opacity: 1;\n  }\n\n  // Disabled inputs\n  //\n  // HTML5 says that controls under a fieldset > legend:first-child won\'t be\n  // disabled if the fieldset is disabled. Due to implementation difficulty, we\n  // don\'t honor that edge case; we style them as disabled anyway.\n  &:disabled {\n    color: $input-disabled-color;\n    background-color: $input-disabled-bg;\n    border-color: $input-disabled-border-color;\n    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.\n    opacity: 1;\n  }\n\n  // File input buttons theming\n  &::file-selector-button {\n    padding: $input-padding-y $input-padding-x;\n    margin: (-$input-padding-y) (-$input-padding-x);\n    margin-inline-end: $input-padding-x;\n    color: $form-file-button-color;\n    @include gradient-bg($form-file-button-bg);\n    pointer-events: none;\n    border-color: inherit;\n    border-style: solid;\n    border-width: 0;\n    border-inline-end-width: $input-border-width;\n    border-radius: 0; // stylelint-disable-line property-disallowed-list\n    @include transition($btn-transition);\n  }\n\n  &:hover:not(:disabled):not([readonly])::file-selector-button {\n    background-color: $form-file-button-hover-bg;\n  }\n}\n\n// Readonly controls as plain text\n//\n// Apply class to a readonly input to make it appear like regular plain\n// text (without any border, background color, focus indicator)\n\n.form-control-plaintext {\n  display: block;\n  width: 100%;\n  padding: $input-padding-y 0;\n  margin-bottom: 0; // match inputs if this class comes on inputs with default margins\n  line-height: $input-line-height;\n  color: $input-plaintext-color;\n  background-color: transparent;\n  border: solid transparent;\n  border-width: $input-border-width 0;\n\n  &:focus {\n    outline: 0;\n  }\n\n  &.form-control-sm,\n  &.form-control-lg {\n    padding-right: 0;\n    padding-left: 0;\n  }\n}\n\n// Form control sizing\n//\n// Build on `.form-control` with modifier classes to decrease or increase the\n// height and font-size of form controls.\n//\n// Repeated in `_input_group.scss` to avoid Sass extend issues.\n\n.form-control-sm {\n  min-height: $input-height-sm;\n  padding: $input-padding-y-sm $input-padding-x-sm;\n  @include font-size($input-font-size-sm);\n  @include border-radius($input-border-radius-sm);\n\n  &::file-selector-button {\n    padding: $input-padding-y-sm $input-padding-x-sm;\n    margin: (-$input-padding-y-sm) (-$input-padding-x-sm);\n    margin-inline-end: $input-padding-x-sm;\n  }\n}\n\n.form-control-lg {\n  min-height: $input-height-lg;\n  padding: $input-padding-y-lg $input-padding-x-lg;\n  @include font-size($input-font-size-lg);\n  @include border-radius($input-border-radius-lg);\n\n  &::file-selector-button {\n    padding: $input-padding-y-lg $input-padding-x-lg;\n    margin: (-$input-padding-y-lg) (-$input-padding-x-lg);\n    margin-inline-end: $input-padding-x-lg;\n  }\n}\n\n// Make sure textareas don\'t shrink too much when resized\n// https://github.com/twbs/bootstrap/pull/29124\n// stylelint-disable selector-no-qualifying-type\ntextarea {\n  &.form-control {\n    min-height: $input-height;\n  }\n\n  &.form-control-sm {\n    min-height: $input-height-sm;\n  }\n\n  &.form-control-lg {\n    min-height: $input-height-lg;\n  }\n}\n// stylelint-enable selector-no-qualifying-type\n\n.form-control-color {\n  width: $form-color-width;\n  height: $input-height;\n  padding: $input-padding-y;\n\n  &:not(:disabled):not([readonly]) {\n    cursor: pointer;\n  }\n\n  &::-moz-color-swatch {\n    border: 0 !important; // stylelint-disable-line declaration-no-important\n    @include border-radius($input-border-radius);\n  }\n\n  &::-webkit-color-swatch {\n    border: 0 !important; // stylelint-disable-line declaration-no-important\n    @include border-radius($input-border-radius);\n  }\n\n  &.form-control-sm { height: $input-height-sm; }\n  &.form-control-lg { height: $input-height-lg; }\n}\n';
 const __vite_glob_0_60 = '.form-multi-select {\n  // scss-docs-start form-multi-select-css-vars\n  --#{$prefix}form-multi-select-zindex: #{$form-multi-select-zindex};\n  --#{$prefix}form-multi-select-font-family: #{$form-multi-select-font-family};\n  --#{$prefix}form-multi-select-font-size: #{$form-multi-select-font-size};\n  --#{$prefix}form-multi-select-font-weight: #{$form-multi-select-font-weight};\n  --#{$prefix}form-multi-select-line-height: #{$form-multi-select-line-height};\n  --#{$prefix}form-multi-select-color: #{$form-multi-select-color};\n  --#{$prefix}form-multi-select-bg: #{$form-multi-select-bg};\n  --#{$prefix}form-multi-select-box-shadow: #{$form-multi-select-box-shadow};\n  --#{$prefix}form-multi-select-border-width: #{$form-multi-select-border-width};\n  --#{$prefix}form-multi-select-border-color: #{$form-multi-select-border-color};\n  --#{$prefix}form-multi-select-border-radius: #{$form-multi-select-border-radius};\n  --#{$prefix}form-multi-select-disabled-color: #{$form-multi-select-disabled-color};\n  --#{$prefix}form-multi-select-disabled-bg: #{$form-multi-select-disabled-bg};\n  --#{$prefix}form-multi-select-disabled-border-color: #{$form-multi-select-disabled-border-color};\n  --#{$prefix}form-multi-select-focus-color: #{$form-multi-select-focus-color};\n  --#{$prefix}form-multi-select-focus-bg: #{$form-multi-select-focus-bg};\n  --#{$prefix}form-multi-select-focus-border-color: #{$form-multi-select-focus-border-color};\n  --#{$prefix}form-multi-select-focus-box-shadow: #{$form-multi-select-focus-box-shadow};\n  --#{$prefix}form-multi-select-placeholder-color: #{$form-multi-select-placeholder-color};\n  --#{$prefix}form-multi-select-selection-padding-y: #{$form-multi-select-selection-padding-y};\n  --#{$prefix}form-multi-select-selection-padding-x: #{$form-multi-select-selection-padding-x};\n  --#{$prefix}form-multi-select-cleaner-width: #{$form-multi-select-cleaner-width};\n  --#{$prefix}form-multi-select-cleaner-height: #{$form-multi-select-cleaner-height};\n  --#{$prefix}form-multi-select-cleaner-padding-y: #{$form-multi-select-cleaner-padding-y};\n  --#{$prefix}form-multi-select-cleaner-padding-x: #{$form-multi-select-cleaner-padding-x};\n  --#{$prefix}form-multi-select-cleaner-icon: #{escape-svg($form-multi-select-cleaner-icon)};\n  --#{$prefix}form-multi-select-cleaner-icon-color: #{$form-multi-select-cleaner-icon-color};\n  --#{$prefix}form-multi-select-cleaner-icon-hover-color: #{$form-multi-select-cleaner-icon-hover-color};\n  --#{$prefix}form-multi-select-cleaner-icon-size: #{$form-multi-select-cleaner-icon-size};\n  --#{$prefix}form-multi-select-indicator-width: #{$form-multi-select-indicator-width};\n  --#{$prefix}form-multi-select-indicator-height: #{$form-multi-select-indicator-height};\n  --#{$prefix}form-multi-select-indicator-padding-y: #{$form-multi-select-indicator-padding-y};\n  --#{$prefix}form-multi-select-indicator-padding-x: #{$form-multi-select-indicator-padding-x};\n  --#{$prefix}form-multi-select-indicator-icon: #{escape-svg($form-multi-select-indicator-icon)};\n  --#{$prefix}form-multi-select-indicator-icon-color: #{$form-multi-select-indicator-icon-color};\n  --#{$prefix}form-multi-select-indicator-icon-hover-color: #{$form-multi-select-indicator-icon-hover-color};\n  --#{$prefix}form-multi-select-indicator-icon-size: #{$form-multi-select-indicator-icon-size};\n  --#{$prefix}form-multi-select-select-all-padding-y: #{$form-multi-select-select-all-padding-y};\n  --#{$prefix}form-multi-select-select-all-padding-x: #{$form-multi-select-select-all-padding-x};\n  --#{$prefix}form-multi-select-select-all-color: #{$form-multi-select-select-all-color};\n  --#{$prefix}form-multi-select-select-all-bg: #{$form-multi-select-select-all-bg};\n  --#{$prefix}form-multi-select-select-all-border-width: #{$form-multi-select-select-all-border-width};\n  --#{$prefix}form-multi-select-select-all-border-color: #{$form-multi-select-select-all-border-color};\n  --#{$prefix}form-multi-select-select-all-hover-color: #{$form-multi-select-select-all-hover-color};\n  --#{$prefix}form-multi-select-select-all-hover-bg: #{$form-multi-select-select-all-hover-bg};\n  --#{$prefix}form-multi-select-dropdown-min-width: #{$form-multi-select-dropdown-min-width};\n  --#{$prefix}form-multi-select-dropdown-bg: #{$form-multi-select-dropdown-bg};\n  --#{$prefix}form-multi-select-dropdown-border-width: #{$form-multi-select-dropdown-border-width};\n  --#{$prefix}form-multi-select-dropdown-border-color: #{$form-multi-select-dropdown-border-color};\n  --#{$prefix}form-multi-select-dropdown-border-radius: #{$form-multi-select-dropdown-border-radius};\n  --#{$prefix}form-multi-select-dropdown-box-shadow: #{$form-multi-select-dropdown-box-shadow};\n  --#{$prefix}form-multi-select-options-padding-y: #{$form-multi-select-options-padding-y};\n  --#{$prefix}form-multi-select-options-padding-x: #{$form-multi-select-options-padding-x};\n  --#{$prefix}form-multi-select-options-font-size: #{$form-multi-select-options-font-size};\n  --#{$prefix}form-multi-select-options-font-weight: #{$form-multi-select-options-font-weight};\n  --#{$prefix}form-multi-select-options-color: #{$form-multi-select-options-color};\n  --#{$prefix}form-multi-select-optgroup-label-padding-y: #{$form-multi-select-optgroup-label-padding-y};\n  --#{$prefix}form-multi-select-optgroup-label-padding-x: #{$form-multi-select-optgroup-label-padding-x};\n  --#{$prefix}form-multi-select-optgroup-label-font-size: #{$form-multi-select-optgroup-label-font-size};\n  --#{$prefix}form-multi-select-optgroup-label-font-weight: #{$form-multi-select-optgroup-label-font-weight};\n  --#{$prefix}form-multi-select-optgroup-label-color: #{$form-multi-select-optgroup-label-color};\n  --#{$prefix}form-multi-select-optgroup-label-text-transform: #{$form-multi-select-optgroup-label-text-transform};\n  --#{$prefix}form-multi-select-option-padding-y: #{$form-multi-select-option-padding-y};\n  --#{$prefix}form-multi-select-option-padding-x: #{$form-multi-select-option-padding-x};\n  --#{$prefix}form-multi-select-option-margin-y: #{$form-multi-select-option-margin-y};\n  --#{$prefix}form-multi-select-option-margin-x: #{$form-multi-select-option-margin-x};\n  --#{$prefix}form-multi-select-option-border-width: #{$form-multi-select-option-border-width};\n  --#{$prefix}form-multi-select-option-border-color: #{$form-multi-select-option-border-color};\n  --#{$prefix}form-multi-select-option-border-radius: #{$form-multi-select-option-border-radius};\n  --#{$prefix}form-multi-select-option-box-shadow: #{$form-multi-select-option-box-shadow};\n  --#{$prefix}form-multi-select-option-hover-color: #{$form-multi-select-option-hover-color};\n  --#{$prefix}form-multi-select-option-hover-bg: #{$form-multi-select-option-hover-bg};\n  --#{$prefix}form-multi-select-option-focus-box-shadow: #{$form-multi-select-option-focus-box-shadow};\n  --#{$prefix}form-multi-select-option-disabled-color: #{$form-multi-select-option-disabled-color};\n  --#{$prefix}form-multi-select-option-indicator-width: #{$form-multi-select-option-indicator-width};\n  --#{$prefix}form-multi-select-option-indicator-bg: #{$form-multi-select-option-indicator-bg};\n  --#{$prefix}form-multi-select-option-indicator-border: #{$form-multi-select-option-indicator-border};\n  --#{$prefix}form-multi-select-option-indicator-border-radius: #{$form-multi-select-option-indicator-border-radius};\n  --#{$prefix}form-multi-select-option-selected-bg: #{$form-multi-select-option-selected-bg};\n  --#{$prefix}form-multi-select-option-selected-indicator-bg: #{$form-multi-select-option-selected-indicator-bg};\n  --#{$prefix}form-multi-select-option-selected-indicator-bg-image: #{escape-svg($form-multi-select-option-selected-indicator-bg-image)};\n  --#{$prefix}form-multi-select-option-selected-indicator-border-color: #{$form-multi-select-option-selected-indicator-border-color};\n  --#{$prefix}form-multi-select-tag-padding-y: #{$form-multi-select-tag-padding-y};\n  --#{$prefix}form-multi-select-tag-padding-x: #{$form-multi-select-tag-padding-x};\n  --#{$prefix}form-multi-select-tag-bg: #{$form-multi-select-tag-bg};\n  --#{$prefix}form-multi-select-tag-border-width: #{$form-multi-select-tag-border-width};\n  --#{$prefix}form-multi-select-tag-border-color: #{$form-multi-select-tag-border-color};\n  --#{$prefix}form-multi-select-tag-border-radius: #{$form-multi-select-tag-border-radius};\n  --#{$prefix}form-multi-select-tag-delete-width: #{$form-multi-select-tag-delete-width};\n  --#{$prefix}form-multi-select-tag-delete-height: #{$form-multi-select-tag-delete-height};\n  --#{$prefix}form-multi-select-tag-delete-icon: #{escape-svg($form-multi-select-tag-delete-icon)};\n  --#{$prefix}form-multi-select-tag-delete-icon-color: #{$form-multi-select-tag-delete-icon-color};\n  --#{$prefix}form-multi-select-tag-delete-icon-hover-color: #{$form-multi-select-tag-delete-icon-hover-color};\n  --#{$prefix}form-multi-select-tag-delete-icon-size: #{$form-multi-select-tag-delete-icon-size};\n  --#{$prefix}form-multi-select-selection-tags-gap: #{$form-multi-select-selection-tags-gap};\n  --#{$prefix}form-multi-select-selection-tags-padding-y: #{$form-multi-select-selection-tags-padding-y};\n  --#{$prefix}form-multi-select-selection-tags-padding-x: #{$form-multi-select-selection-tags-padding-x};\n  // scss-docs-end form-multi-select-css-vars\n\n  position: relative;\n\n  .was-validated .form-multi-select:invalid + &,\n  &.is-invalid {\n    --#{$prefix}form-multi-select-border-color: #{$form-multi-select-invalid-border-color};\n  }\n\n  .was-validated .form-multi-select:valid + &,\n  &.is-valid {\n    --#{$prefix}form-multi-select-border-color: #{$form-multi-select-valid-border-color};\n  }\n}\n\n// stylelint-disable-next-line selector-no-qualifying-type\nselect.form-multi-select {\n  display: none;\n}\n\n.form-multi-select-input-group {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: stretch;\n  width: 100%;\n  font-family: var(--#{$prefix}form-multi-select-font-family);\n  @include font-size(var(--#{$prefix}form-multi-select-font-size));\n  font-weight: var(--#{$prefix}form-multi-select-font-weight);\n  line-height: var(--#{$prefix}form-multi-select-line-height);\n  color: var(--#{$prefix}form-multi-select-color);\n  background-color: var(--#{$prefix}form-multi-select-bg);\n  background-clip: padding-box;\n  border: var(--#{$prefix}form-multi-select-border-width) solid var(--#{$prefix}form-multi-select-border-color);\n  @include border-radius(var(--#{$prefix}form-multi-select-border-radius));\n\n  .form-multi-select & {\n    @include transition($input-transition);\n  }\n\n  .form-multi-select.disabled & {\n    color: var(--#{$prefix}form-multi-select-disabled-color);\n    background-color: var(--#{$prefix}form-multi-select-disabled-bg);\n    border-color: $input-disabled-border-color;\n  }\n\n  .form-multi-select.show & {\n    color: var(--#{$prefix}form-multi-select-focus-color);\n    background-color: var(--#{$prefix}form-multi-select-focus-bg);\n    border-color: var(--#{$prefix}form-multi-select-focus-border-color);\n    outline: 0;\n    @if $enable-shadows {\n      box-shadow: var(--#{$prefix}form-multi-select-box-shadow), var(--#{$prefix}form-multi-select-focus-box-shadow);\n    } @else {\n      box-shadow: var(--#{$prefix}form-multi-select-focus-box-shadow);\n    }\n  }\n}\n\n.form-multi-select-selection {\n  position: relative;\n  display: flex;\n  flex: 1 1 auto;\n  flex-wrap: wrap;\n  width: 1%;\n  min-width: 0;\n  padding: var(--#{$prefix}form-multi-select-selection-padding-y) var(--#{$prefix}form-multi-select-selection-padding-x);\n}\n\n.form-multi-select-selection-tags {\n  gap: var(--#{$prefix}form-multi-select-selection-tags-gap);\n  align-content: center;\n  padding: var(--#{$prefix}form-multi-select-selection-tags-padding-y) var(--#{$prefix}form-multi-select-selection-tags-padding-x);\n}\n\n.form-multi-select-search {\n  display: none;\n  flex: 1 1 auto;\n  max-width: 100%;\n  padding: 0;\n  background: transparent;\n  border: 0;\n\n  &:focus {\n    outline: 0;\n  }\n\n  &::placeholder {\n    color: var(--#{$prefix}form-multi-select-placeholder-color);\n    opacity: 1;\n  }\n\n  .form-multi-select.show &,\n  &:placeholder-shown {\n    display: flex;\n  }\n\n  .form-multi-select-selection-tags & {\n    padding-inline-start: calc(var(--#{$prefix}form-multi-select-selection-padding-x) - .25rem); // stylelint-disable-line function-disallowed-list\n  }\n}\n\n.form-multi-select-placeholder {\n  color: var(--#{$prefix}form-multi-select-placeholder-color);\n\n  .form-multi-select-selection-tags & {\n    padding: calc(var(--#{$prefix}form-multi-select-selection-padding-y) - .25rem) calc(var(--#{$prefix}form-multi-select-selection-padding-x) - .25rem); // stylelint-disable-line function-disallowed-list\n  }\n}\n\n.form-multi-select-buttons {\n  display: flex;\n  align-items: center;\n  min-height: calc(2 * var(--#{$prefix}form-multi-select-selection-padding-y) + calc(var(--#{$prefix}form-multi-select-font-size) * var(--#{$prefix}form-multi-select-line-height)));  // stylelint-disable-line function-disallowed-list\n  padding: 0 var(--#{$prefix}form-multi-select-selection-padding-y);\n}\n\n.form-multi-select-cleaner,\n.form-multi-select-indicator {\n  position: relative;\n  z-index: 2;\n  box-sizing: content-box;\n  background-color: transparent;\n  background-repeat: no-repeat;\n  background-position: center;\n  border: 0;\n\n  &:focus {\n    z-index: 5;\n    outline: 0;\n    box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);\n    @include border-radius($border-radius);\n  }\n\n  &::before {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    content: "";\n  }\n}\n\n.form-multi-select-cleaner {\n  width: var(--#{$prefix}form-multi-select-cleaner-width);\n  height: var(--#{$prefix}form-multi-select-cleaner-height);\n  padding: var(--#{$prefix}form-multi-select-cleaner-padding-y) var(--#{$prefix}form-multi-select-cleaner-padding-x);\n\n  &::before {\n    background-color: var(--#{$prefix}form-multi-select-cleaner-icon-color);\n    mask: var(--#{$prefix}form-multi-select-cleaner-icon) center / var(--#{$prefix}form-multi-select-cleaner-icon-size) no-repeat;\n  }\n\n  &:focus::before,\n  &:hover::before {\n    background-color: var(--#{$prefix}form-multi-select-cleaner-icon-hover-color);\n  }\n}\n\n.form-multi-select-indicator {\n  width: var(--#{$prefix}form-multi-select-indicator-width);\n  height: var(--#{$prefix}form-multi-select-indicator-height);\n  padding: var(--#{$prefix}form-multi-select-indicator-padding-y) var(--#{$prefix}form-multi-select-indicator-padding-x);\n  @include transition(transform .15s ease-in-out);\n\n  &::before {\n    background-color: var(--#{$prefix}form-multi-select-indicator-icon-color);\n    mask: var(--#{$prefix}form-multi-select-indicator-icon) center / var(--#{$prefix}form-multi-select-indicator-icon-size) no-repeat;\n  }\n\n  &:focus::before,\n  &:hover::before {\n    background-color: var(--#{$prefix}form-multi-select-indicator-icon-hover-color);\n  }\n\n  .form-multi-select.show & {\n    transform: rotate(180deg);\n  }\n}\n\n.form-multi-select-tag {\n  display: flex;\n  align-items: center;\n  padding: var(--#{$prefix}form-multi-select-tag-padding-y) var(--#{$prefix}form-multi-select-tag-padding-x);\n  background-color: var(--#{$prefix}form-multi-select-tag-bg);\n  border: var(--#{$prefix}form-multi-select-tag-border-width) solid var(--#{$prefix}form-multi-select-tag-border-color);\n  @include border-radius(var(--#{$prefix}form-multi-select-tag-border-radius));\n}\n\n.form-multi-select-tag-delete {\n  position: relative;\n  z-index: 2;\n  box-sizing: content-box;\n  width: var(--#{$prefix}form-multi-select-tag-delete-width);\n  height: var(--#{$prefix}form-multi-select-tag-delete-height);\n  padding: var(--#{$prefix}form-multi-select-tag-delete-padding-y) var(--#{$prefix}form-multi-select-tag-delete-padding-x);\n  margin-inline-start: $spacer * .5;\n  background-color: transparent;\n  border: 0;\n\n  &::before {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    content: "";\n    background-color: var(--#{$prefix}form-multi-select-tag-delete-icon-color);\n    mask: var(--#{$prefix}form-multi-select-tag-delete-icon) center / var(--#{$prefix}form-multi-select-tag-delete-icon-size) no-repeat;\n  }\n\n  &:focus::before,\n  &:hover::before {\n    background-color: var(--#{$prefix}form-multi-select-tag-delete-icon-hover-color);\n  }\n}\n\n.form-multi-select-dropdown {\n  position: absolute;\n  z-index: var(--#{$prefix}form-multi-select-zindex);\n  display: none; // none by default, but block on "open" of the menu\n  min-width: var(--#{$prefix}form-multi-select-dropdown-min-width);\n  background-color: var(--#{$prefix}form-multi-select-dropdown-bg);\n  background-clip: padding-box;\n  border: var(--#{$prefix}form-multi-select-dropdown-border-width) solid var(--#{$prefix}form-multi-select-dropdown-border-color);\n  @include border-radius(var(--#{$prefix}form-multi-select-dropdown-border-radius));\n  @include box-shadow(var(--#{$prefix}form-multi-select-dropdown-box-shadow));\n  @include elevation(4);\n\n  .form-multi-select.show & {\n    display: block;\n  }\n}\n\n.form-multi-select-all {\n  display: block;\n  width: 100%;\n  padding: var(--#{$prefix}form-multi-select-select-all-padding-y) var(--#{$prefix}form-multi-select-select-all-padding-x);\n  color: var(--#{$prefix}form-multi-select-select-all-color);\n  text-align: start;\n  background-color: var(--#{$prefix}form-multi-select-select-all-bg);\n  border: 0;\n  border-bottom: var(--#{$prefix}form-multi-select-select-all-border-width) solid var(--#{$prefix}form-multi-select-select-all-border-color);\n\n  &:hover {\n    color: var(--#{$prefix}form-multi-select-select-all-hover-color);\n    background-color: var(--#{$prefix}form-multi-select-select-all-hover-bg);\n  }\n}\n\n.form-multi-select-options {\n  padding: var(--#{$prefix}form-multi-select-options-padding-y) var(--#{$prefix}form-multi-select-options-padding-x);\n  font-size: var(--#{$prefix}form-multi-select-options-font-size);\n  font-weight: var(--#{$prefix}form-multi-select-options-font-weight);\n  color: var(--#{$prefix}form-multi-select-options-color);\n}\n\n.form-multi-select-option {\n  position: relative;\n  z-index: 2;\n  padding: var(--#{$prefix}form-multi-select-option-padding-y) var(--#{$prefix}form-multi-select-option-padding-x);\n  margin: var(--#{$prefix}form-multi-select-option-margin-y) var(--#{$prefix}form-multi-select-option-margin-x);\n  cursor: pointer;\n  border: var(--#{$prefix}form-multi-select-option-border-width) solid var(--#{$prefix}form-multi-select-option-border-color);\n  @include border-radius(var(--#{$prefix}form-multi-select-option-border-radius), 0);\n\n  &:hover,\n  &:focus {\n    color: var(--#{$prefix}form-multi-select-option-hover-color);\n    text-decoration: none;\n    background-color: var(--#{$prefix}form-multi-select-option-hover-bg);\n  }\n\n  &:focus {\n    z-index: 5;\n    border-color: var(--#{$prefix}input-focus-border-color, $input-focus-border-color);\n    outline: 0;\n    @if $enable-shadows {\n      box-shadow: var(--#{$prefix}form-multi-select-box-shadow), var(--#{$prefix}form-multi-select-focus-box-shadow);\n    } @else {\n      box-shadow: var(--#{$prefix}form-multi-select-focus-box-shadow);\n    }\n  }\n\n  &.disabled {\n    color: var(--#{$prefix}form-multi-select-option-disabled-color);\n    pointer-events: none;\n    background-color: transparent;\n  }\n\n  &.form-multi-select-option-with-checkbox {\n    padding: $form-multi-select-option-padding-y $form-multi-select-option-padding-x;\n    @include ltr-rtl("padding-left", calc(var(--#{$prefix}form-multi-select-option-padding-x) + var(--#{$prefix}form-multi-select-option-indicator-width)));\n    &::before {\n      position: absolute;\n      top: .7rem;\n      @include ltr-rtl("left",  calc(var(--#{$prefix}form-multi-select-option-padding-x) * .5));\n      display: block;\n      width: var(--#{$prefix}form-multi-select-option-indicator-width);\n      height: var(--#{$prefix}form-multi-select-option-indicator-width);\n      pointer-events: none;\n      content: "";\n      background-color: var(--#{$prefix}form-multi-select-option-indicator-bg);\n      background-repeat: no-repeat;\n      background-position: center;\n      background-size: contain;\n      border: var(--#{$prefix}form-multi-select-option-indicator-border);\n      @include border-radius(var(--#{$prefix}form-multi-select-option-indicator-border-radius));\n    }\n  }\n\n\n  &.form-multi-selected {\n    background-color: var(--#{$prefix}form-multi-select-option-selected-bg);\n\n    &::before {\n      background-color: var(--#{$prefix}form-multi-select-option-selected-indicator-bg);\n      background-image: var(--#{$prefix}form-multi-select-option-selected-indicator-bg-image);\n      border-color: var(--#{$prefix}form-multi-select-option-selected-indicator-border-color);\n    }\n  }\n}\n\n.form-multi-select-optgroup-label {\n  padding: var(--#{$prefix}form-multi-select-options-padding-y) var(--#{$prefix}form-multi-select-options-padding-x);\n  font-size: var(--#{$prefix}form-multi-select-optgroup-label-font-size);\n  font-weight: var(--#{$prefix}form-multi-select-optgroup-label-font-weight);\n  color: var(--#{$prefix}form-multi-select-optgroup-label-color);\n  text-transform: var(--#{$prefix}form-multi-select-optgroup-label-text-transform);\n}\n\n.form-multi-select-options-empty {\n  padding: var(--#{$prefix}form-multi-select-option-padding-y) var(--#{$prefix}form-multi-select-option-padding-x);\n}\n\n\n.form-multi-select-sm {\n  --#{$prefix}form-multi-select-selection-padding-y: #{$form-multi-select-selection-padding-y-sm};\n  --#{$prefix}form-multi-select-selection-padding-x: #{$form-multi-select-selection-padding-x-sm};\n  --#{$prefix}form-multi-select-font-size: #{$form-multi-select-font-size-sm};\n  --#{$prefix}form-multi-select-border-radius: #{$form-multi-select-border-radius-sm};\n  --#{$prefix}form-multi-select-tag-padding-y: #{$form-multi-select-tag-padding-y-sm};\n  --#{$prefix}form-multi-select-tag-padding-x: #{$form-multi-select-tag-padding-x-sm};\n  --#{$prefix}form-multi-select-tag-border-radius: #{$form-multi-select-tag-border-radius-sm};\n  --#{$prefix}form-multi-select-selection-tags-gap: #{$form-multi-select-selection-tags-gap-sm};\n  --#{$prefix}form-multi-select-selection-tags-padding-y: #{$form-multi-select-selection-tags-padding-y-sm};\n  --#{$prefix}form-multi-select-selection-tags-padding-x: #{$form-multi-select-selection-tags-padding-x-sm};\n}\n\n.form-multi-select-lg {\n  --#{$prefix}form-multi-select-selection-padding-y: #{$form-multi-select-selection-padding-y-lg};\n  --#{$prefix}form-multi-select-selection-padding-x: #{$form-multi-select-selection-padding-x-lg};\n  --#{$prefix}form-multi-select-font-size: #{$form-multi-select-font-size-lg};\n  --#{$prefix}form-multi-select-border-radius: #{$form-multi-select-border-radius-lg};\n  --#{$prefix}form-multi-select-tag-padding-y: #{$form-multi-select-tag-padding-y-lg};\n  --#{$prefix}form-multi-select-tag-padding-x: #{$form-multi-select-tag-padding-x-lg};\n  --#{$prefix}form-multi-select-tag-border-radius: #{$form-multi-select-tag-border-radius-lg};\n  --#{$prefix}form-multi-select-selection-tags-gap: #{$form-multi-select-selection-tags-gap-lg};\n  --#{$prefix}form-multi-select-selection-tags-padding-y: #{$form-multi-select-selection-tags-padding-y-lg};\n  --#{$prefix}form-multi-select-selection-tags-padding-x: #{$form-multi-select-selection-tags-padding-x-lg};\n}\n';
@@ -3675,7 +3675,7 @@ const __vite_glob_0_78 = ".vr {\n  display: inline-block;\n  align-self: stretch
 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 = '@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.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_82 = "@mixin bsBanner($file) {\n  /*!\n   * CoreUI PRO #{$file} v5.4.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 {
@@ -3772,7 +3772,7 @@ const __vite_glob_0_109 = `// stylelint-disable declaration-no-important
 // Use to only display content when it's focused, or one of its child elements is focused
 // (i.e. when focus is within the element/container that the class was applied to)
 //
-// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+// Useful for "Skip to main content" links; see https://www.w3.org/WAI/WCAG22/Techniques/general/G1.html
 
 @mixin visually-hidden-focusable() {
   &:not(:focus):not(:focus-within) {
@@ -3780,7 +3780,7 @@ const __vite_glob_0_109 = `// stylelint-disable declaration-no-important
   }
 }
 `;
-const __vite_glob_0_110 = '%sidebar-narrow {\n  // scss-docs-start sidebar-narrow-css-vars\n  --#{$prefix}sidebar-narrow-width: #{$sidebar-narrow-width};\n  // scss-docs-end sidebar-narrow-css-vars\n\n  @include media-breakpoint-up($mobile-breakpoint) {\n    flex: 0 0 var(--#{$prefix}sidebar-narrow-width);\n    width: var(--#{$prefix}sidebar-narrow-width);\n    padding-bottom: var(--#{$prefix}sidebar-toggler-height);\n    overflow: visible;\n\n    &.sidebar-fixed {\n      width: var(--#{$prefix}sidebar-narrow-width);\n    }\n\n    .sidebar-brand-full {\n      display: none;\n    }\n\n    .sidebar-brand-narrow {\n      display: block;\n    }\n\n    .sidebar-header {\n      justify-content: center;\n      padding-right: 0;\n      padding-left: 0;\n    }\n\n    .sidebar-nav {\n      --#{$prefix}sidebar-nav-link-padding-x: #{$sidebar-narrow-nav-link-padding-x};\n      --#{$prefix}sidebar-nav-link-padding-y: #{$sidebar-narrow-nav-link-padding-y};\n    }\n\n    .nav-icon {\n      flex: 0 0 calc(var(--#{$prefix}sidebar-narrow-width) - (var(--#{$prefix}sidebar-nav-padding-x) * 2) - (var(--#{$prefix}sidebar-nav-link-padding-x) * 2)); // stylelint-disable-line function-disallowed-list\n    }\n\n    .d-narrow-none,\n    .nav-label,\n    .nav-title,\n    .nav-group-items,\n    .nav-group.show .nav-group-items,\n    .sidebar-form {\n      height: 0 !important; // stylelint-disable-line declaration-no-important\n      padding: 0 !important; // stylelint-disable-line declaration-no-important\n      margin: 0 !important; // stylelint-disable-line declaration-no-important\n      visibility: hidden;\n      opacity: 0;\n    }\n\n    .sidebar-toggler::before {\n      @include ltr-rtl("transform", rotate(-180deg), null, rotate(0deg));\n    }\n\n    &.sidebar-end .sidebar-toggler::before {\n      transform: rotate(0deg);\n    }\n  }\n}\n\n.sidebar-narrow {\n  @extend %sidebar-narrow;\n  &:not(.sidebar-end) ~ * {\n    --#{$prefix}sidebar-occupy-start: #{$sidebar-narrow-width};\n  }\n  &.sidebar-end ~ * {\n    --#{$prefix}sidebar-occupy-end: #{$sidebar-narrow-width};\n  }\n\n  .nav-link {\n    overflow: hidden;\n  }\n}\n\n.sidebar-narrow-unfoldable {\n  position: fixed;\n\n  &:not(.sidebar-end) ~ * {\n    --#{$prefix}sidebar-occupy-start: #{$sidebar-narrow-width};\n  }\n  &.sidebar-end ~ * {\n    --#{$prefix}sidebar-occupy-end: #{$sidebar-narrow-width};\n  }\n\n  &:not(:hover) {\n    @extend %sidebar-narrow;\n  }\n\n  &:hover {\n    box-shadow: $box-shadow;\n\n    .sidebar-toggler::before {\n      @include ltr-rtl("transform", rotate(-180deg), null, rotate(0deg));\n    }\n\n    &.sidebar-end .sidebar-toggler::before {\n      transform: rotate(0deg);\n    }\n  }\n\n  .nav-link {\n    overflow: hidden;\n  }\n}\n\n// Responsive behavior\n@each $breakpoint in map-keys($grid-breakpoints) {\n  @include media-breakpoint-down($breakpoint) {\n    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);\n    .sidebar:not(.show).sidebar-self-hiding#{$infix} {\n      &.sidebar-narrow,\n      &.sidebar-narrow-unfoldable {\n        &:not(.sidebar-end) {\n          @include ltr-rtl("margin-left", calc(var(--#{$prefix}sidebar-narrow-width) * -1));\n        }\n        &.sidebar-end {\n          @include ltr-rtl("margin-right", calc(var(--#{$prefix}sidebar-narrow-width) * -1));\n        }\n      }\n    }\n  }\n}\n';
+const __vite_glob_0_110 = '%sidebar-narrow {\n  // scss-docs-start sidebar-narrow-css-vars\n  --#{$prefix}sidebar-narrow-width: #{$sidebar-narrow-width};\n  // scss-docs-end sidebar-narrow-css-vars\n\n  @include media-breakpoint-up($mobile-breakpoint) {\n    flex: 0 0 var(--#{$prefix}sidebar-narrow-width);\n    width: var(--#{$prefix}sidebar-narrow-width);\n    padding-bottom: var(--#{$prefix}sidebar-toggler-height);\n    overflow: visible;\n\n    &.sidebar-fixed {\n      width: var(--#{$prefix}sidebar-narrow-width);\n    }\n\n    .sidebar-brand-full {\n      display: none;\n    }\n\n    .sidebar-brand-narrow {\n      display: block;\n    }\n\n    .sidebar-header {\n      justify-content: center;\n      padding-right: 0;\n      padding-left: 0;\n    }\n\n    .sidebar-nav {\n      --#{$prefix}sidebar-nav-link-padding-x: #{$sidebar-narrow-nav-link-padding-x};\n      --#{$prefix}sidebar-nav-link-padding-y: #{$sidebar-narrow-nav-link-padding-y};\n    }\n\n    .nav-icon {\n      flex: 0 0 calc(var(--#{$prefix}sidebar-narrow-width) - (var(--#{$prefix}sidebar-nav-padding-x) * 2) - (var(--#{$prefix}sidebar-nav-link-padding-x) * 2)); // stylelint-disable-line function-disallowed-list\n    }\n\n    .d-narrow-none,\n    .nav-label,\n    .nav-title,\n    .nav-group-items,\n    .nav-group.show .nav-group-items,\n    .sidebar-form {\n      height: 0 !important; // stylelint-disable-line declaration-no-important\n      padding: 0 !important; // stylelint-disable-line declaration-no-important\n      margin: 0 !important; // stylelint-disable-line declaration-no-important\n      visibility: hidden;\n      opacity: 0;\n    }\n\n    .sidebar-toggler::before {\n      @include ltr-rtl("transform", rotate(-180deg), null, rotate(0deg));\n    }\n\n    &.sidebar-end .sidebar-toggler::before {\n      transform: rotate(0deg);\n    }\n  }\n}\n\n.sidebar-narrow {\n  @extend %sidebar-narrow;\n  &:not(.sidebar-end) ~ * {\n    --#{$prefix}sidebar-occupy-start: #{$sidebar-narrow-width} !important; // stylelint-disable-line declaration-no-important\n  }\n  &.sidebar-end ~ * {\n    --#{$prefix}sidebar-occupy-end: #{$sidebar-narrow-width} !important; // stylelint-disable-line declaration-no-important\n  }\n\n  .nav-link {\n    overflow: hidden;\n  }\n}\n\n.sidebar-narrow-unfoldable {\n  position: fixed;\n\n  &:not(.sidebar-end) ~ * {\n    --#{$prefix}sidebar-occupy-start: #{$sidebar-narrow-width} !important; // stylelint-disable-line declaration-no-important\n  }\n  &.sidebar-end ~ * {\n    --#{$prefix}sidebar-occupy-end: #{$sidebar-narrow-width} !important; // stylelint-disable-line declaration-no-important\n  }\n\n  &:not(:hover) {\n    @extend %sidebar-narrow;\n  }\n\n  &:hover {\n    box-shadow: $box-shadow;\n\n    .sidebar-toggler::before {\n      @include ltr-rtl("transform", rotate(-180deg), null, rotate(0deg));\n    }\n\n    &.sidebar-end .sidebar-toggler::before {\n      transform: rotate(0deg);\n    }\n  }\n\n  .nav-link {\n    overflow: hidden;\n  }\n}\n\n// Responsive behavior\n@each $breakpoint in map-keys($grid-breakpoints) {\n  @include media-breakpoint-down($breakpoint) {\n    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);\n    .sidebar:not(.show).sidebar-self-hiding#{$infix} {\n      &.sidebar-narrow,\n      &.sidebar-narrow-unfoldable {\n        &:not(.sidebar-end) {\n          @include ltr-rtl("margin-left", calc(var(--#{$prefix}sidebar-narrow-width) * -1));\n        }\n        &.sidebar-end {\n          @include ltr-rtl("margin-right", calc(var(--#{$prefix}sidebar-narrow-width) * -1));\n        }\n      }\n    }\n  }\n}\n';
 const __vite_glob_0_111 = '// Sidebar navigation\n\n.sidebar-nav {\n  // scss-docs-start sidebar-nav-css-vars\n  --#{$prefix}sidebar-nav-padding-x: #{$sidebar-nav-padding-x};\n  --#{$prefix}sidebar-nav-padding-y: #{$sidebar-nav-padding-y};\n\n  --#{$prefix}sidebar-nav-title-padding-x: #{$sidebar-nav-title-padding-x};\n  --#{$prefix}sidebar-nav-title-padding-y: #{$sidebar-nav-title-padding-y};\n  --#{$prefix}sidebar-nav-title-margin-top: #{$sidebar-nav-title-margin-top};\n  --#{$prefix}sidebar-nav-title-color: #{$sidebar-nav-title-color};\n\n  --#{$prefix}sidebar-nav-link-padding-x: #{$sidebar-nav-link-padding-x};\n  --#{$prefix}sidebar-nav-link-padding-y: #{$sidebar-nav-link-padding-y};\n  --#{$prefix}sidebar-nav-link-color: #{$sidebar-nav-link-color};\n  --#{$prefix}sidebar-nav-link-bg: #{$sidebar-nav-link-bg};\n  --#{$prefix}sidebar-nav-link-border-color: #{$sidebar-nav-link-border-color};\n  --#{$prefix}sidebar-nav-link-border-radius: #{$sidebar-nav-link-border-radius};\n  --#{$prefix}sidebar-nav-link-border-width: #{$sidebar-nav-link-border-width};\n\n  --#{$prefix}sidebar-nav-link-active-color: #{$sidebar-nav-link-active-color};\n  --#{$prefix}sidebar-nav-link-active-bg: #{$sidebar-nav-link-active-bg};\n  --#{$prefix}sidebar-nav-link-disabled-color: #{$sidebar-nav-link-disabled-color};\n  --#{$prefix}sidebar-nav-link-hover-color: #{$sidebar-nav-link-hover-color};\n  --#{$prefix}sidebar-nav-link-hover-bg: #{$sidebar-nav-link-hover-bg};\n\n  --#{$prefix}sidebar-nav-link-icon-margin: #{$sidebar-nav-link-icon-margin};\n  --#{$prefix}sidebar-nav-link-icon-color: #{$sidebar-nav-link-icon-color};\n  --#{$prefix}sidebar-nav-link-icon-width: #{$sidebar-nav-link-icon-width};\n  --#{$prefix}sidebar-nav-link-icon-height: #{$sidebar-nav-link-icon-height};\n  --#{$prefix}sidebar-nav-link-icon-font-size: #{$sidebar-nav-link-icon-font-size};\n  --#{$prefix}sidebar-nav-link-active-icon-color: #{$sidebar-nav-link-active-icon-color};\n  --#{$prefix}sidebar-nav-link-disabled-icon-color: #{$sidebar-nav-link-disabled-icon-color};\n  --#{$prefix}sidebar-nav-link-hover-icon-color: #{$sidebar-nav-link-hover-icon-color};\n\n  --#{$prefix}sidebar-nav-link-icon-bullet-size: #{$sidebar-nav-link-icon-bullet-size};\n  --#{$prefix}sidebar-nav-link-icon-bullet-bg: #{$sidebar-nav-link-icon-bullet-bg};\n  --#{$prefix}sidebar-nav-link-icon-bullet-border-width: #{$sidebar-nav-link-icon-bullet-border-width};\n  --#{$prefix}sidebar-nav-link-icon-bullet-border-radius: #{$sidebar-nav-link-icon-bullet-border-radius};\n  --#{$prefix}sidebar-nav-link-icon-bullet-border-color: #{$sidebar-nav-link-icon-bullet-border-color};\n  --#{$prefix}sidebar-nav-link-active-icon-bullet-bg: #{$sidebar-nav-link-active-icon-bullet-bg};\n  --#{$prefix}sidebar-nav-link-active-icon-bullet-border-color: #{$sidebar-nav-link-active-icon-bullet-border-color};\n  --#{$prefix}sidebar-nav-link-disabled-icon-bullet-bg: #{$sidebar-nav-link-disabled-icon-bullet-bg};\n  --#{$prefix}sidebar-nav-link-disabled-icon-bullet-border-color: #{$sidebar-nav-link-disabled-icon-bullet-border-color};\n  --#{$prefix}sidebar-nav-link-hover-icon-bullet-bg: #{$sidebar-nav-link-hover-icon-bullet-bg};\n  --#{$prefix}sidebar-nav-link-hover-icon-bullet-border-color: #{$sidebar-nav-link-hover-icon-bullet-border-color};\n\n  --#{$prefix}sidebar-nav-group-bg: #{$sidebar-nav-group-bg};\n  --#{$prefix}sidebar-nav-group-border-width: #{$sidebar-nav-group-border-width};\n  --#{$prefix}sidebar-nav-group-border-radius: #{$sidebar-nav-group-border-radius};\n  --#{$prefix}sidebar-nav-group-border-color: #{$sidebar-nav-group-border-color};\n  --#{$prefix}sidebar-nav-group-items-padding-y: #{$sidebar-nav-group-items-padding-y};\n  --#{$prefix}sidebar-nav-group-items-padding-x: #{$sidebar-nav-group-items-padding-x};\n  --#{$prefix}sidebar-nav-group-indicator-color: #{$sidebar-nav-group-indicator-color};\n  --#{$prefix}sidebar-nav-group-indicator-icon: #{escape-svg($sidebar-nav-group-indicator-icon)};\n  --#{$prefix}sidebar-nav-group-indicator-hover-color: #{$sidebar-nav-group-indicator-hover-color};\n  --#{$prefix}sidebar-nav-group-indicator-hover-icon: #{escape-svg($sidebar-nav-group-indicator-hover-icon)};\n  --#{$prefix}sidebar-nav-group-toggle-show-color: #{$sidebar-nav-group-toggle-show-color};\n  // scss-docs-end sidebar-nav-css-vars\n\n  position: relative;\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  padding: var(--#{$prefix}sidebar-nav-padding-y) var(--#{$prefix}sidebar-nav-padding-x);\n  margin-bottom: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  list-style: none;\n\n  .nav-item + .nav-item,\n  .nav-item + .nav-group,\n  .nav-group + .nav-item {\n    margin-top: 1px;\n  }\n\n  .nav-title {\n    padding: var(--#{$prefix}sidebar-nav-title-padding-y) var(--#{$prefix}sidebar-nav-title-padding-x);\n    margin-top: var(--#{$prefix}sidebar-nav-title-margin-top);\n    font-size: 80%;\n    font-weight: 700;\n    color: var(--#{$prefix}sidebar-nav-title-color);\n    text-transform: uppercase;\n    @include transition($sidebar-nav-title-transition);\n  }\n\n  .nav-link {\n    display: flex;\n    flex: 1;\n    align-items: center;\n    padding: var(--#{$prefix}sidebar-nav-link-padding-y) var(--#{$prefix}sidebar-nav-link-padding-x);\n    color: var(--#{$prefix}sidebar-nav-link-color);\n    text-decoration: none;\n    white-space: nowrap;\n    background: var(--#{$prefix}sidebar-nav-link-bg);\n    border: var(--#{$prefix}sidebar-nav-link-border-width) solid var(--#{$prefix}sidebar-nav-link-border-color);\n    @include border-radius(var(--#{$prefix}sidebar-nav-link-border-radius));\n    @include transition($sidebar-nav-link-transition);\n\n    &.active {\n      color: var(--#{$prefix}sidebar-nav-link-active-color);\n      background: var(--#{$prefix}sidebar-nav-link-active-bg);\n\n      .nav-icon {\n        color: var(--#{$prefix}sidebar-nav-link-active-icon-color);\n      }\n\n      .nav-icon-bullet {\n        background: var(--#{$prefix}sidebar-link-active-icon-bullet-bg);\n        border-color: var(--#{$prefix}sidebar-link-active-icon-bullet-border-color);\n      }\n    }\n\n    &.disabled {\n      color: var(--#{$prefix}sidebar-nav-link-disabled-color);\n      pointer-events: none;\n      cursor: not-allowed;\n      background: transparent;\n\n      .nav-icon {\n        color: var(--#{$prefix}sidebar-nav-link-disabled-icon-color);\n      }\n\n      .nav-icon-bullet {\n        background: var(--#{$prefix}sidebar-link-disabled-icon-bullet-bg);\n        border-color: var(--#{$prefix}sidebar-link-disabled-icon-bullet-border-color);\n      }\n\n      &:hover {\n        color: var(--#{$prefix}sidebar-nav-link-disabled-color);\n\n        .nav-icon {\n          color: var(--#{$prefix}sidebar-nav-link-disabled-icon-color);\n        }\n\n        .nav-icon-bullet {\n          background: var(--#{$prefix}sidebar-link-disabled-icon-bullet-bg);\n          border-color: var(--#{$prefix}sidebar-link-disabled-icon-bullet-border-color);\n        }\n\n        &.nav-dropdown-toggle::after {\n          background-color: var(--#{$prefix}sidebar-nav-group-indicator-hover-color);\n          mask-image: var(--#{$prefix}sidebar-nav-group-indicator-hover-icon);\n        }\n      }\n    }\n\n    @media (hover: hover), (-ms-high-contrast: none) {\n      &:hover {\n        color: var(--#{$prefix}sidebar-nav-link-hover-color);\n        text-decoration: none;\n        background: var(--#{$prefix}sidebar-nav-link-hover-bg);\n\n        .nav-icon {\n          color: var(--#{$prefix}sidebar-nav-link-hover-icon-color);\n        }\n\n        .nav-icon-bullet {\n          background: var(--#{$prefix}sidebar-link-hover-icon-bullet-bg);\n          border-color: var(--#{$prefix}sidebar-link-hover-icon-bullet-border-color);\n        }\n\n        &.nav-group-toggle::after {\n          background-color: var(--#{$prefix}sidebar-nav-group-indicator-hover-color);\n          mask-image: var(--#{$prefix}sidebar-nav-group-indicator-hover-icon);\n        }\n      }\n    }\n  }\n\n  .nav-icon {\n    display: flex;\n    flex: 0 0 var(--#{$prefix}sidebar-nav-link-icon-width);\n    align-items: center;\n    justify-content: center;\n    height: var(--#{$prefix}sidebar-nav-link-icon-height);\n    @include ltr-rtl("margin-right", var(--#{$prefix}sidebar-nav-link-icon-margin));\n    font-size: var(--#{$prefix}sidebar-nav-link-icon-font-size);\n    color: var(--#{$prefix}sidebar-nav-link-icon-color);\n    text-align: center;\n    pointer-events: none;\n    fill: currentcolor;\n    @include transition(inherit);\n  }\n\n  .nav-icon-bullet {\n    display: inline-block;\n    width: var(--#{$prefix}sidebar-nav-link-icon-bullet-size);\n    height: var(--#{$prefix}sidebar-nav-link-icon-bullet-size);\n    background: var(--#{$prefix}sidebar-nav-link-icon-bullet-bg);\n    border: var(--#{$prefix}sidebar-nav-link-icon-bullet-border-width) solid var(--#{$prefix}sidebar-nav-link-icon-bullet-border-color);\n    border-radius: var(--#{$prefix}sidebar-nav-link-icon-bullet-border-radius); // stylelint-disable-line property-disallowed-list\n  }\n\n  // stylelint-disable-next-line selector-no-qualifying-type\n  svg.nav-icon {\n    overflow: hidden; // fix chrome 105+ width issue\n  }\n\n  .nav-group {\n    position: relative;\n    border: var(--#{$prefix}sidebar-nav-group-border-width) solid var(--#{$prefix}sidebar-nav-group-border-color);\n    @include border-radius(var(--#{$prefix}sidebar-nav-group-border-radius));\n    @include transition($sidebar-nav-group-transition);\n\n    .nav-group-items {\n      padding: var(--#{$prefix}sidebar-nav-group-items-padding-y) var(--#{$prefix}sidebar-nav-group-items-padding-x);\n      overflow: hidden;\n      @include transition($sidebar-nav-group-items-transition);\n    }\n\n    &:not(.show) .nav-group-items {\n      display: none;\n    }\n\n    &.show {\n      background: var(--#{$prefix}sidebar-nav-group-bg);\n\n      .nav-group-toggle {\n        color: var(--#{$prefix}sidebar-nav-group-toggle-show-color);\n      }\n\n      > .nav-group-toggle::after {\n        transform: rotate(180deg);\n      }\n\n      + .show {\n        margin-top: 1px;\n      }\n    }\n  }\n\n  .nav-group-toggle {\n    cursor: pointer;\n\n    &::after {\n      display: block;\n      flex: 0 12px;\n      height: 12px;\n      @include ltr-rtl("margin-left", auto);\n      content: "";\n      background-color: var(--#{$prefix}sidebar-nav-group-indicator-color);\n      mask-image: var(--#{$prefix}sidebar-nav-group-indicator-icon);\n      @include transition($sidebar-nav-group-indicator-transition);\n    }\n  }\n\n  .nav-group-items {\n    padding: 0;\n    list-style: none;\n\n    .nav-link {\n      @include ltr-rtl("padding-left", calc(var(--#{$prefix}sidebar-nav-link-padding-x) + var(--#{$prefix}sidebar-nav-link-icon-width) + var(--#{$prefix}sidebar-nav-link-icon-margin)));\n    }\n\n    .nav-icon {\n      @include ltr-rtl("margin-left", calc((var(--#{$prefix}sidebar-nav-link-icon-width) + var(--#{$prefix}sidebar-nav-link-icon-margin)) * -1));\n    }\n  }\n\n  &.compact,\n  .compact {\n    .nav-link {\n      --#{$prefix}sidebar-nav-link-padding-y: #{$sidebar-compact-nav-link-padding-y};\n    }\n  }\n}\n';
 const __vite_glob_0_112 = `// stylelint-disable function-disallowed-list
 
@@ -4092,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.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_116 = "@mixin bsBanner($file) {\n  /*!\n   * CoreUI PRO for Bootstrap #{$file} v5.4.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}';
diff --git a/vue/docs/assets/accessibility.html-BI4xofDT.js b/vue/docs/assets/accessibility.html-BI4xofDT.js
new file mode 100644
index 00000000000..ec95a09d0cc
--- /dev/null
+++ b/vue/docs/assets/accessibility.html-BI4xofDT.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.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">#</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">#</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">#</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">#</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">#</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">#</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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_21);
+}
+const accessibility_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "accessibility.html.vue"]]);
+const data = JSON.parse('{"path":"/getting-started/accessibility.html","title":"Accessibility","lang":"en-US","frontmatter":{"title":"Accessibility","name":"Accessibility","description":"A brief overview of CoreUI for Vue features and limitations for the creation of accessible content.","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/getting-started/accessibility.html"}]]},"headers":[{"level":2,"title":"Overview and limitations","slug":"overview-and-limitations","link":"#overview-and-limitations","children":[{"level":3,"title":"Structural markup","slug":"structural-markup","link":"#structural-markup","children":[]},{"level":3,"title":"Interactive components","slug":"interactive-components","link":"#interactive-components","children":[]},{"level":3,"title":"Color contrast","slug":"color-contrast","link":"#color-contrast","children":[]},{"level":3,"title":"Visually hidden content","slug":"visually-hidden-content","link":"#visually-hidden-content","children":[]},{"level":3,"title":"Reduced motion","slug":"reduced-motion","link":"#reduced-motion","children":[]}]},{"level":2,"title":"Additional resources","slug":"additional-resources","link":"#additional-resources","children":[]}],"filePathRelative":"getting-started/accessibility.md"}');
+export {
+  accessibility_html as comp,
+  data
+};
diff --git a/vue/docs/assets/accessibility.html-CkVUBrW4.js b/vue/docs/assets/accessibility.html-CkVUBrW4.js
deleted file mode 100644
index d397f02e04a..00000000000
--- a/vue/docs/assets/accessibility.html-CkVUBrW4.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_21);
-}
-const accessibility_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "accessibility.html.vue"]]);
-const data = JSON.parse('{"path":"/getting-started/accessibility.html","title":"Accessibility","lang":"en-US","frontmatter":{"title":"Accessibility","name":"Accessibility","description":"A brief overview of CoreUI for Vue features and limitations for the creation of accessible content.","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/getting-started/accessibility.html"}]]},"headers":[{"level":2,"title":"Overview and limitations","slug":"overview-and-limitations","link":"#overview-and-limitations","children":[{"level":3,"title":"Structural markup","slug":"structural-markup","link":"#structural-markup","children":[]},{"level":3,"title":"Interactive components","slug":"interactive-components","link":"#interactive-components","children":[]},{"level":3,"title":"Color contrast","slug":"color-contrast","link":"#color-contrast","children":[]},{"level":3,"title":"Visually hidden content","slug":"visually-hidden-content","link":"#visually-hidden-content","children":[]},{"level":3,"title":"Reduced motion","slug":"reduced-motion","link":"#reduced-motion","children":[]}]},{"level":2,"title":"Additional resources","slug":"additional-resources","link":"#additional-resources","children":[]}],"filePathRelative":"getting-started/accessibility.md"}');
-export {
-  accessibility_html as comp,
-  data
-};
diff --git a/vue/docs/assets/accordion.html-DPn8cCyj.js b/vue/docs/assets/accordion.html-1-bBbpuj.js
similarity index 87%
rename from vue/docs/assets/accordion.html-DPn8cCyj.js
rename to vue/docs/assets/accordion.html-1-bBbpuj.js
index 8763431c554..b24006bdc84 100644
--- a/vue/docs/assets/accordion.html-DPn8cCyj.js
+++ b/vue/docs/assets/accordion.html-1-bBbpuj.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "examples",
@@ -7,8 +7,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Examples "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#examples",
-    "aria-hidden": "true"
+    href: "#examples"
   }, "#")
 ], -1);
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, "Click the accordions below to expand/collapse the accordion content.", -1);
@@ -19,7 +18,7 @@ const _hoisted_6 = /* @__PURE__ */ createBaseVNode("strong", null, "This is the
 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_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">#</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);
@@ -27,7 +26,7 @@ const _hoisted_16 = /* @__PURE__ */ createBaseVNode("strong", null, "This is the
 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_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">#</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);
@@ -35,9 +34,9 @@ const _hoisted_26 = /* @__PURE__ */ createBaseVNode("strong", null, "This is the
 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);
+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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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">#</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">#</a></h3>', 3);
+const _hoisted_37 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="caccordion" tabindex="-1">CAccordion <a class="anchor-link" href="#caccordion">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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");
diff --git a/vue/docs/assets/admin-dashboard.html-DU-BWvUG.js b/vue/docs/assets/admin-dashboard.html-CseRtZFD.js
similarity index 98%
rename from vue/docs/assets/admin-dashboard.html-DU-BWvUG.js
rename to vue/docs/assets/admin-dashboard.html-CseRtZFD.js
index 475034511e1..71393ce01af 100644
--- a/vue/docs/assets/admin-dashboard.html-DU-BWvUG.js
+++ b/vue/docs/assets/admin-dashboard.html-CseRtZFD.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, d as createVNode, e as withCtx, b as createBaseVNode, f as createTextVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "vue-admin-dashboard-templates",
@@ -7,8 +7,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Vue Admin & Dashboard Templates "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#vue-admin-dashboard-templates",
-    "aria-hidden": "true"
+    href: "#vue-admin-dashboard-templates"
   }, "#")
 ], -1);
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, "Check out the fully-featured, ready-to-use admin dashboard templates built using CoreUI for Vue.js, and CoreUI PRO for Vue.js", -1);
diff --git a/vue/docs/assets/alert.html-Aeh8K-Wf.js b/vue/docs/assets/alert.html-Aeh8K-Wf.js
new file mode 100644
index 00000000000..87d535d7ff3
--- /dev/null
+++ b/vue/docs/assets/alert.html-Aeh8K-Wf.js
@@ -0,0 +1,486 @@
+import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {
+  __name: "alert.html",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const liveExampleVisible = ref(false);
+    const message = () => {
+      alert("👋 Well, hi there! Thanks for dismissing me.");
+    };
+    const __returned__ = { liveExampleVisible, message, ref };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+};
+const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
+  id: "examples",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("Examples "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#examples"
+  }, "#")
+], -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-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><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">#</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-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-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 class="token keyword">const</span> liveExampleVisible <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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>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 class="token tag"><span 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></div><h3 id="link-color" tabindex="-1">Link color <a class="anchor-link" href="#link-color">#</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-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><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">#</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-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><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">#</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-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><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-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><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">#</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-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-title="vue"><pre class="language-vue"><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">#</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-vue line-numbers-mode" data-highlighter="prismjs" data-ext="vue" data-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> <span class="token function-variable function">message</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 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>\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>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>message<span class="token punctuation">&quot;</span></span><span class="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 class="token tag"><span 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><h2 id="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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">#</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">#</a></h3>', 3);
+const _hoisted_48 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="calert" tabindex="-1">CAlert <a class="anchor-link" href="#calert">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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: $setup.liveExampleVisible,
+        dismissible: "",
+        onClose: _cache[0] || (_cache[0] = () => {
+          $setup.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] = () => {
+          $setup.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: $setup.message
+      }, {
+        default: withCtx(() => [
+          _hoisted_40,
+          createTextVNode(" and click that dimiss over there on the right. ")
+        ]),
+        _: 1
+      })
+    ]),
+    _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-CDqS0NZ4.js b/vue/docs/assets/alert.html-CDqS0NZ4.js
deleted file mode 100644
index b6d35c1d9f4..00000000000
--- a/vue/docs/assets/alert.html-CDqS0NZ4.js
+++ /dev/null
@@ -1,486 +0,0 @@
-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/app-BoHWg5jI.js b/vue/docs/assets/app-DGOUrGv-.js
similarity index 98%
rename from vue/docs/assets/app-BoHWg5jI.js
rename to vue/docs/assets/app-DGOUrGv-.js
index ad3bbef56da..68779184519 100644
--- a/vue/docs/assets/app-BoHWg5jI.js
+++ b/vue/docs/assets/app-DGOUrGv-.js
@@ -1,4 +1,4 @@
-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]);
+const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["assets/icon.html-ivU2m4Fv.js","assets/cif-us-C2ywU_oW.js","assets/date-picker.html-BHuOUNDP.js","assets/es-DXofg4kJ.js","assets/date-range-picker.html-Bs7ll3rY.js","assets/multi-select.html-DtyKZra7.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);
@@ -50,7 +50,9 @@ const __vitePreload = function preload(baseModule, deps, importerUrl) {
     );
   }
   return promise2.then(() => baseModule()).catch((err) => {
-    const e2 = new Event("vite:preloadError", { cancelable: true });
+    const e2 = new Event("vite:preloadError", {
+      cancelable: true
+    });
     e2.payload = err;
     window.dispatchEvent(e2);
     if (!e2.defaultPrevented) {
@@ -59,7 +61,7 @@ const __vitePreload = function preload(baseModule, deps, importerUrl) {
   });
 };
 /**
-* @vue/shared v3.4.34
+* @vue/shared v3.4.38
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -288,7 +290,7 @@ const stringifySymbol = (v2, i2 = "") => {
   );
 };
 /**
-* @vue/reactivity v3.4.34
+* @vue/reactivity v3.4.38
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -688,7 +690,7 @@ class BaseReactiveHandler {
       return isShallow2;
     } else if (key === "__v_raw") {
       if (receiver === (isReadonly2 ? isShallow2 ? shallowReadonlyMap : readonlyMap : isShallow2 ? shallowReactiveMap : reactiveMap).get(target) || // receiver is not the reactive proxy, but has the same prototype
-      // this means the reciever is a user proxy of the reactive proxy
+      // this means the receiver is a user proxy of the reactive proxy
       Object.getPrototypeOf(target) === Object.getPrototypeOf(receiver)) {
         return target;
       }
@@ -1423,7 +1425,7 @@ function propertyToRef(source, key, defaultValue) {
   return isRef(val) ? val : new ObjectRefImpl(source, key, defaultValue);
 }
 /**
-* @vue/runtime-core v3.4.34
+* @vue/runtime-core v3.4.38
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -3695,7 +3697,7 @@ function provide(key, value) {
 function inject(key, defaultValue, treatDefaultAsFactory = false) {
   const instance = currentInstance || currentRenderingInstance;
   if (instance || currentApp) {
-    const provides = instance ? instance.parent == null ? instance.vnode.appContext && instance.vnode.appContext.provides : instance.parent.provides : currentApp._context.provides;
+    const provides = currentApp ? currentApp._context.provides : instance ? instance.parent == null ? instance.vnode.appContext && instance.vnode.appContext.provides : instance.parent.provides : void 0;
     if (provides && key in provides) {
       return provides[key];
     } else if (arguments.length > 1) {
@@ -3965,20 +3967,33 @@ function normalizePropsOptions(comp, appContext, asMixin = false) {
       if (validatePropName(normalizedKey)) {
         const opt = raw[key];
         const prop = normalized[normalizedKey] = isArray$c(opt) || isFunction$6(opt) ? { type: opt } : extend({}, opt);
-        if (prop) {
-          const booleanIndex = getTypeIndex(Boolean, prop.type);
-          const stringIndex = getTypeIndex(String, prop.type);
-          prop[
-            0
-            /* shouldCast */
-          ] = booleanIndex > -1;
-          prop[
-            1
-            /* shouldCastTrue */
-          ] = stringIndex < 0 || booleanIndex < stringIndex;
-          if (booleanIndex > -1 || hasOwn(prop, "default")) {
-            needCastKeys.push(normalizedKey);
+        const propType = prop.type;
+        let shouldCast = false;
+        let shouldCastTrue = true;
+        if (isArray$c(propType)) {
+          for (let index2 = 0; index2 < propType.length; ++index2) {
+            const type = propType[index2];
+            const typeName = isFunction$6(type) && type.name;
+            if (typeName === "Boolean") {
+              shouldCast = true;
+              break;
+            } else if (typeName === "String") {
+              shouldCastTrue = false;
+            }
           }
+        } else {
+          shouldCast = isFunction$6(propType) && propType.name === "Boolean";
+        }
+        prop[
+          0
+          /* shouldCast */
+        ] = shouldCast;
+        prop[
+          1
+          /* shouldCastTrue */
+        ] = shouldCastTrue;
+        if (shouldCast || hasOwn(prop, "default")) {
+          needCastKeys.push(normalizedKey);
         }
       }
     }
@@ -4009,17 +4024,6 @@ function getType(ctor) {
   }
   return "";
 }
-function isSameType(a2, b2) {
-  return getType(a2) === getType(b2);
-}
-function getTypeIndex(type, expectedTypes) {
-  if (isArray$c(expectedTypes)) {
-    return expectedTypes.findIndex((t2) => isSameType(t2, type));
-  } else if (isFunction$6(expectedTypes)) {
-    return isSameType(expectedTypes, type) ? 0 : -1;
-  }
-  return -1;
-}
 function validateProps(rawProps, props, instance) {
   const resolvedValues = toRaw(props);
   const options = instance.propsOptions[0];
@@ -4356,15 +4360,11 @@ const TeleportImpl = {
     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;
+      const target = n2.target = resolveTarget(n2.props, querySelector);
+      const targetAnchor = prepareAnchor(target, n2, createText, insert);
       if (target) {
-        insert(targetStart, target);
-        insert(targetAnchor, target);
         if (namespace === "svg" || isTargetSVG(target)) {
           namespace = "svg";
         } else if (namespace === "mathml" || isTargetMathML(target)) {
@@ -4536,7 +4536,7 @@ function moveTeleport(vnode, container, parentAnchor, { o: { insert }, m: move }
   }
 }
 function hydrateTeleport(node, vnode, parentComponent, parentSuspense, slotScopeIds, optimized, {
-  o: { nextSibling, parentNode, querySelector }
+  o: { nextSibling, parentNode, querySelector, insert, createText }
 }, hydrateChildren) {
   const target = vnode.target = resolveTarget(
     vnode.props,
@@ -4555,20 +4555,28 @@ function hydrateTeleport(node, vnode, parentComponent, parentSuspense, slotScope
           slotScopeIds,
           optimized
         );
-        vnode.targetAnchor = targetNode;
+        vnode.targetStart = targetNode;
+        vnode.targetAnchor = targetNode && nextSibling(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;
+          if (targetAnchor && targetAnchor.nodeType === 8) {
+            if (targetAnchor.data === "teleport start anchor") {
+              vnode.targetStart = targetAnchor;
+            } else if (targetAnchor.data === "teleport anchor") {
+              vnode.targetAnchor = targetAnchor;
+              target._lpa = vnode.targetAnchor && nextSibling(vnode.targetAnchor);
+              break;
+            }
           }
+          targetAnchor = nextSibling(targetAnchor);
+        }
+        if (!vnode.targetAnchor) {
+          prepareAnchor(target, vnode, createText, insert);
         }
         hydrateChildren(
-          targetNode,
+          targetNode && nextSibling(targetNode),
           vnode,
           target,
           parentComponent,
@@ -4594,6 +4602,16 @@ function updateCssVars(vnode) {
     ctx.ut();
   }
 }
+function prepareAnchor(target, vnode, createText, insert) {
+  const targetStart = vnode.targetStart = createText("");
+  const targetAnchor = vnode.targetAnchor = createText("");
+  targetStart[TeleportEndKey] = targetAnchor;
+  if (target) {
+    insert(targetStart, target);
+    insert(targetAnchor, target);
+  }
+  return targetAnchor;
+}
 let hasLoggedMismatchError = false;
 const logMismatchError = () => {
   if (hasLoggedMismatchError) {
@@ -4876,6 +4894,7 @@ Server rendered element contains more child nodes than client vdom.`
       }
       if (props) {
         {
+          const isCustomElement = el.tagName.includes("-");
           for (const key in props) {
             if (
               // #11189 skip if this node has directives that have created hooks
@@ -4885,7 +4904,7 @@ Server rendered element contains more child nodes than client vdom.`
               logMismatchError();
             }
             if (forcePatch && (key.endsWith("value") || key === "indeterminate") || isOn(key) && !isReservedProp(key) || // force hydrate v-bind with .prop modifiers
-            key[0] === ".") {
+            key[0] === "." || isCustomElement) {
               patchProp2(el, key, null, props[key], void 0, parentComponent);
             }
           }
@@ -5176,44 +5195,44 @@ function resolveCssVars(instance, vnode, expectedMap) {
     resolveCssVars(instance.parent, instance.vnode, expectedMap);
   }
 }
-let supported$2;
-let perf$2;
+let supported$1;
+let perf$1;
 function startMeasure(instance, type) {
   if (instance.appContext.config.performance && isSupported()) {
-    perf$2.mark(`vue-${type}-${instance.uid}`);
+    perf$1.mark(`vue-${type}-${instance.uid}`);
   }
   {
-    devtoolsPerfStart(instance, type, isSupported() ? perf$2.now() : Date.now());
+    devtoolsPerfStart(instance, type, isSupported() ? perf$1.now() : Date.now());
   }
 }
 function endMeasure(instance, type) {
   if (instance.appContext.config.performance && isSupported()) {
     const startTag = `vue-${type}-${instance.uid}`;
     const endTag = startTag + `:end`;
-    perf$2.mark(endTag);
-    perf$2.measure(
+    perf$1.mark(endTag);
+    perf$1.measure(
       `<${formatComponentName(instance, instance.type)}> ${type}`,
       startTag,
       endTag
     );
-    perf$2.clearMarks(startTag);
-    perf$2.clearMarks(endTag);
+    perf$1.clearMarks(startTag);
+    perf$1.clearMarks(endTag);
   }
   {
-    devtoolsPerfEnd(instance, type, isSupported() ? perf$2.now() : Date.now());
+    devtoolsPerfEnd(instance, type, isSupported() ? perf$1.now() : Date.now());
   }
 }
 function isSupported() {
-  if (supported$2 !== void 0) {
-    return supported$2;
+  if (supported$1 !== void 0) {
+    return supported$1;
   }
   if (typeof window !== "undefined" && window.performance) {
-    supported$2 = true;
-    perf$2 = window.performance;
+    supported$1 = true;
+    perf$1 = window.performance;
   } else {
-    supported$2 = false;
+    supported$1 = false;
   }
-  return supported$2;
+  return supported$1;
 }
 function initFeatureFlags() {
   const needWarn = [];
@@ -6592,13 +6611,13 @@ function baseCreateRenderer(options, createHydrationFns) {
         namespace
       );
     }
+    container._vnode = vnode;
     if (!isFlushing2) {
       isFlushing2 = true;
       flushPreFlushCbs();
       flushPostFlushCbs();
       isFlushing2 = false;
     }
-    container._vnode = vnode;
   };
   const internals = {
     p: patch,
@@ -6992,9 +7011,9 @@ function emit(instance, event, ...rawArgs) {
     } = instance;
     if (emitsOptions) {
       if (!(event in emitsOptions) && true) {
-        if (!propsOptions || !(toHandlerKey(event) in propsOptions)) {
+        if (!propsOptions || !(toHandlerKey(camelize(event)) in propsOptions)) {
           warn$1(
-            `Component emitted event "${event}" but it is neither declared in the emits option nor as an "${toHandlerKey(event)}" prop.`
+            `Component emitted event "${event}" but it is neither declared in the emits option nor as an "${toHandlerKey(camelize(event))}" prop.`
           );
         }
       } else {
@@ -8405,10 +8424,10 @@ function initCustomFormatter() {
     window.devtoolsFormatters = [formatter];
   }
 }
-const version$1 = "3.4.34";
+const version$1 = "3.4.38";
 const warn$2 = warn$1;
 /**
-* @vue/runtime-dom v3.4.34
+* @vue/runtime-dom v3.4.38
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -9218,7 +9237,7 @@ function normalizeContainer(container) {
   return container;
 }
 /**
-* vue v3.4.34
+* vue v3.4.38
 * (c) 2018-present Yuxi (Evan) You and Vue contributors
 * @license MIT
 **/
@@ -9320,962 +9339,966 @@ 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-CXtJwXEn.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/CChart.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_CChart.api.html" */
-    "./CChart.api.html-BFRT-Fhg.js"
+    "./CChart.api.html-BPKhb3Ee.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-CkVUBrW4.js"
-  ), true ? [] : void 0), meta: { "title": "Accessibility" } }],
-  ["/getting-started/introduction.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "getting-started_introduction.html" */
-    "./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-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-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-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-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-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-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-BD4KH7gA.js"
-  ), true ? [] : void 0), meta: { "title": "Vue Input Group Component" } }],
-  ["/forms/input.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "forms_input.html" */
-    "./input.html-BPr4o7jo.js"
-  ), true ? [] : void 0), meta: { "title": "Vue Form Input" } }],
-  ["/forms/layout.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "forms_layout.html" */
-    "./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-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-DEHhVOWL.js"
-  ), true ? [] : void 0), meta: { "title": "Vue Form Components" } }],
-  ["/forms/radio.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "forms_radio.html" */
-    "./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-DLE7qJRM.js"
-  ), true ? [] : void 0), meta: { "title": "Vue Range Component" } }],
-  ["/forms/rating.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "forms_rating.html" */
-    "./rating.html-COUjsjjF.js"
-  ), true ? [] : void 0), meta: { "title": "Vue Rating Component" } }],
-  ["/forms/select.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "forms_select.html" */
-    "./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-CzcyoMGb.js"
-  ), true ? [] : void 0), meta: { "title": "Vue Switch Component" } }],
-  ["/forms/textarea.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "forms_textarea.html" */
-    "./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-DlV52mWV.js"
-  ), true ? [] : void 0), meta: { "title": "Vue Time Picker Component" } }],
-  ["/forms/validation.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "forms_validation.html" */
-    "./validation.html-2QwCYaBH.js"
-  ), true ? [] : void 0), meta: { "title": "Vue Form Validation" } }],
   ["/components/accordion.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_accordion.html" */
-    "./accordion.html-DPn8cCyj.js"
+    "./accordion.html-1-bBbpuj.js"
   ), true ? [] : void 0), meta: { "title": "Vue Accordion Component" } }],
   ["/components/alert.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_alert.html" */
-    "./alert.html-CDqS0NZ4.js"
+    "./alert.html-Aeh8K-Wf.js"
   ), true ? [] : void 0), meta: { "title": "Vue Alert Component" } }],
   ["/components/avatar.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_avatar.html" */
-    "./avatar.html-CGvuFR7Q.js"
+    "./avatar.html-BD-B4lfD.js"
   ), true ? [] : void 0), meta: { "title": "Vue Avatar Component" } }],
   ["/components/badge.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_badge.html" */
-    "./badge.html-BIxXbpUI.js"
+    "./badge.html-Dear1jUq.js"
   ), true ? [] : void 0), meta: { "title": "Vue Badge Component" } }],
   ["/components/breadcrumb.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_breadcrumb.html" */
-    "./breadcrumb.html-3P6FIBpg.js"
+    "./breadcrumb.html-DgLYIaPr.js"
   ), true ? [] : void 0), meta: { "title": "Vue Breadcrumb Component" } }],
   ["/components/button-group.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_button-group.html" */
-    "./button-group.html-DokwKiVg.js"
+    "./button-group.html-7uksYI0F.js"
   ), true ? [] : void 0), meta: { "title": "Vue Button Group Component" } }],
   ["/components/button.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_button.html" */
-    "./button.html-Tm2d-w3G.js"
+    "./button.html-D00S-NDK.js"
   ), true ? [] : void 0), meta: { "title": "Vue Buttons Component" } }],
   ["/components/calendar.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_calendar.html" */
-    "./calendar.html-aIZ63-sL.js"
+    "./calendar.html-Dj___bk9.js"
   ), true ? [] : void 0), meta: { "title": "Vue Calendar Component" } }],
   ["/components/callout.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_callout.html" */
-    "./callout.html-BHcngsku.js"
+    "./callout.html-BvHwLp1x.js"
   ), true ? [] : void 0), meta: { "title": "Vue Callout Component" } }],
   ["/components/card.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_card.html" */
-    "./card.html-CiiNUsv5.js"
+    "./card.html-itUqRb0K.js"
   ), true ? [] : void 0), meta: { "title": "Vue Card Component" } }],
   ["/components/carousel.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_carousel.html" */
-    "./carousel.html-DN2cjEdX.js"
+    "./carousel.html-B0BciYS9.js"
   ), true ? [] : void 0), meta: { "title": "Vue Carousel Component" } }],
   ["/components/chart.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_chart.html" */
-    "./chart.html-DY5wyS1U.js"
+    "./chart.html-CeyziBqZ.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-BS4-GrP8.js"
+    "./close-button.html-blWDZBC3.js"
   ), true ? [] : void 0), meta: { "title": "Vue Close Button Component" } }],
   ["/components/collapse.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_collapse.html" */
-    "./collapse.html-CuA1iHpy.js"
+    "./collapse.html-CXLzPe5v.js"
   ), true ? [] : void 0), meta: { "title": "Vue Collapse Component" } }],
   ["/components/dropdown.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_dropdown.html" */
-    "./dropdown.html-D58fBbQW.js"
+    "./dropdown.html-C4NgwOey.js"
   ), true ? [] : void 0), meta: { "title": "Vue Dropdown Component" } }],
   ["/components/footer.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_footer.html" */
-    "./footer.html-DN3ns744.js"
+    "./footer.html-CSFrT_Wq.js"
   ), true ? [] : void 0), meta: { "title": "Vue Footer Component" } }],
   ["/components/header.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_header.html" */
-    "./header.html-DBfVFFNJ.js"
+    "./header.html-B_Q5U0MU.js"
   ), true ? [] : void 0), meta: { "title": "Vue Header Component" } }],
   ["/components/icon.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_icon.html" */
-    "./icon.html-C2C1fAVP.js"
-  ), true ? __vite__mapDeps([5,4]) : void 0), meta: { "title": "Vue Icon Component" } }],
+    "./icon.html-ivU2m4Fv.js"
+  ), true ? __vite__mapDeps([0,1]) : void 0), meta: { "title": "Vue Icon Component" } }],
   ["/components/image.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_image.html" */
-    "./image.html-DC5HLYH1.js"
+    "./image.html-G4Gptwhr.js"
   ), true ? [] : void 0), meta: { "title": "Vue Image Component" } }],
   ["/components/link.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_link.html" */
-    "./link.html-C2tbxGSf.js"
+    "./link.html-DgFWlsMX.js"
   ), true ? [] : void 0), meta: { "title": "CLink" } }],
   ["/components/list-group.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_list-group.html" */
-    "./list-group.html-ChBEIPwp.js"
+    "./list-group.html-_udCts7M.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-BwfYal81.js"
+    "./loading-button.html-DU_pRN89.js"
   ), true ? [] : void 0), meta: { "title": "Vue Loading Button Component" } }],
   ["/components/modal.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_modal.html" */
-    "./modal.html-KOyG7M6n.js"
+    "./modal.html-BHtWUNx_.js"
   ), true ? [] : void 0), meta: { "title": "Vue Modal Component" } }],
   ["/components/navbar.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_navbar.html" */
-    "./navbar.html-BCzYXKko.js"
+    "./navbar.html-DiQHPkAN.js"
   ), true ? [] : void 0), meta: { "title": "Vue Navbar Component" } }],
   ["/components/navs-tabs.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_navs-tabs.html" */
-    "./navs-tabs.html-BwFsuHAs.js"
+    "./navs-tabs.html-R9_id4Dp.js"
   ), true ? [] : void 0), meta: { "title": "Vue Navs & Tabs Components" } }],
   ["/components/offcanvas.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_offcanvas.html" */
-    "./offcanvas.html-D6TxFWNe.js"
+    "./offcanvas.html-CuZ5zSJ3.js"
   ), true ? [] : void 0), meta: { "title": "Vue Offcanvas Component" } }],
   ["/components/pagination.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_pagination.html" */
-    "./pagination.html-BlNq3AJ1.js"
+    "./pagination.html-B6kiDLSr.js"
   ), true ? [] : void 0), meta: { "title": "Vue Pagination Component" } }],
   ["/components/placeholder.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_placeholder.html" */
-    "./placeholder.html-BBrpG9kK.js"
+    "./placeholder.html-BZpO7heW.js"
   ), true ? [] : void 0), meta: { "title": "Vue Placeholder Component" } }],
   ["/components/popover.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_popover.html" */
-    "./popover.html-CcictLyq.js"
+    "./popover.html-DDOrxn8Z.js"
   ), true ? [] : void 0), meta: { "title": "Vue Popover Component and Directive" } }],
   ["/components/progress.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_progress.html" */
-    "./progress.html-DAixQyXt.js"
+    "./progress.html-DhAMxmt8.js"
   ), true ? [] : void 0), meta: { "title": "Vue Progress Component" } }],
   ["/components/sidebar.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_sidebar.html" */
-    "./sidebar.html-CrmBFQhh.js"
+    "./sidebar.html-sk3JAtdU.js"
   ), true ? [] : void 0), meta: { "title": "Vue Sidebar Component" } }],
   ["/components/smart-pagination.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_smart-pagination.html" */
-    "./smart-pagination.html-CYqfH6pM.js"
+    "./smart-pagination.html-C0KPe66-.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-DMqyM7wC.js"
+    "./smart-table.html-CuXPF5Vb.js"
   ), true ? [] : void 0), meta: { "title": "Vue Smart Table Component (DataTable)" } }],
   ["/components/spinner.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_spinner.html" */
-    "./spinner.html-Dja_Ea9Q.js"
+    "./spinner.html-CbcVdjbB.js"
   ), true ? [] : void 0), meta: { "title": "Vue Spinner Component" } }],
   ["/components/table.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_table.html" */
-    "./table.html-BKhXilE_.js"
+    "./table.html-aCVCSEDl.js"
   ), true ? [] : void 0), meta: { "title": "Vue Table Component" } }],
   ["/components/tabs.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_tabs.html" */
-    "./tabs.html-BryTxUY8.js"
+    "./tabs.html-BjypzLaI.js"
   ), true ? [] : void 0), meta: { "title": "Vue Tabs Components" } }],
   ["/components/toast.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_toast.html" */
-    "./toast.html-B70IM5zC.js"
+    "./toast.html-DUmgmbI1.js"
   ), true ? [] : void 0), meta: { "title": "Vue Toast Component" } }],
   ["/components/tooltip.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_tooltip.html" */
-    "./tooltip.html-D2DMDPTK.js"
+    "./tooltip.html-COZMp0t7.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-eMrz1664.js"
+    "./virtual-scroller.html-se47tihX.js"
   ), true ? [] : void 0), meta: { "title": "Vue Virtual Scroller Component" } }],
   ["/components/widgets.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "components_widgets.html" */
-    "./widgets.html-CX3InA_E.js"
+    "./widgets.html-DaxyknU_.js"
   ), true ? [] : void 0), meta: { "title": "Vue Widgets Components" } }],
+  ["/customize/css-variables.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "customize_css-variables.html" */
+    "./css-variables.html-DBEGBYvO.js"
+  ), true ? [] : void 0), meta: { "title": "CSS variables" } }],
+  ["/customize/options.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "customize_options.html" */
+    "./options.html-Oj00yCyN.js"
+  ), true ? [] : void 0), meta: { "title": "Options" } }],
+  ["/customize/sass.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "customize_sass.html" */
+    "./sass.html-QPkiTP49.js"
+  ), true ? [] : void 0), meta: { "title": "Sass" } }],
+  ["/getting-started/accessibility.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "getting-started_accessibility.html" */
+    "./accessibility.html-BI4xofDT.js"
+  ), true ? [] : void 0), meta: { "title": "Accessibility" } }],
+  ["/getting-started/introduction.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "getting-started_introduction.html" */
+    "./introduction.html-B-WFaD00.js"
+  ), true ? [] : void 0), meta: { "title": "Introduction" } }],
+  ["/forms/checkbox.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "forms_checkbox.html" */
+    "./checkbox.html-BPgHXfGt.js"
+  ), true ? [] : void 0), meta: { "title": "Vue Checkbox Component" } }],
+  ["/forms/checks-radios.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "forms_checks-radios.html" */
+    "./checks-radios.html-CKmk8NM1.js"
+  ), true ? [] : void 0), meta: { "title": "Vue Radio Component" } }],
+  ["/forms/date-picker.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "forms_date-picker.html" */
+    "./date-picker.html-BHuOUNDP.js"
+  ), true ? __vite__mapDeps([2,3]) : 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-Bs7ll3rY.js"
+  ), true ? __vite__mapDeps([4,3]) : void 0), meta: { "title": "Vue Date Range Picker Component" } }],
+  ["/forms/floating-labels.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "forms_floating-labels.html" */
+    "./floating-labels.html-CCkOOAc0.js"
+  ), true ? [] : void 0), meta: { "title": "Vue Floating labels" } }],
+  ["/forms/form-control.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "forms_form-control.html" */
+    "./form-control.html-CxCiB4bb.js"
+  ), true ? [] : void 0), meta: { "title": "Vue Form Controls" } }],
+  ["/forms/input-group.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "forms_input-group.html" */
+    "./input-group.html-DD48IpLE.js"
+  ), true ? [] : void 0), meta: { "title": "Vue Input Group Component" } }],
+  ["/forms/input.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "forms_input.html" */
+    "./input.html-DQVoju7F.js"
+  ), true ? [] : void 0), meta: { "title": "Vue Form Input" } }],
+  ["/forms/layout.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "forms_layout.html" */
+    "./layout.html-B1WhSZXl.js"
+  ), true ? [] : void 0), meta: { "title": "Vue Form Layout" } }],
+  ["/forms/multi-select.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "forms_multi-select.html" */
+    "./multi-select.html-DtyKZra7.js"
+  ), true ? __vite__mapDeps([5,1]) : void 0), meta: { "title": "Vue Multi Select" } }],
+  ["/forms/overview.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "forms_overview.html" */
+    "./overview.html-D68slxn-.js"
+  ), true ? [] : void 0), meta: { "title": "Vue Form Components" } }],
+  ["/forms/radio.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "forms_radio.html" */
+    "./radio.html-DdZZGITP.js"
+  ), true ? [] : void 0), meta: { "title": "Vue Checkbox & Radio Components" } }],
+  ["/forms/range.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "forms_range.html" */
+    "./range.html-DnftQdHW.js"
+  ), true ? [] : void 0), meta: { "title": "Vue Range Component" } }],
+  ["/forms/rating.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "forms_rating.html" */
+    "./rating.html-DDgDjKeh.js"
+  ), true ? [] : void 0), meta: { "title": "Vue Rating Component" } }],
+  ["/forms/select.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "forms_select.html" */
+    "./select.html-HAuQZbve.js"
+  ), true ? [] : void 0), meta: { "title": "Vue Select Component" } }],
+  ["/forms/switch.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "forms_switch.html" */
+    "./switch.html-C_xLNHwA.js"
+  ), true ? [] : void 0), meta: { "title": "Vue Switch Component" } }],
+  ["/forms/textarea.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "forms_textarea.html" */
+    "./textarea.html-Ck18GNEv.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-CvM-vSGB.js"
+  ), true ? [] : void 0), meta: { "title": "Vue Time Picker Component" } }],
+  ["/forms/validation.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "forms_validation.html" */
+    "./validation.html-BZBLONBB.js"
+  ), true ? [] : void 0), meta: { "title": "Vue Form Validation" } }],
+  ["/layout/breakpoints.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "layout_breakpoints.html" */
+    "./breakpoints.html-C6u5z98e.js"
+  ), true ? [] : void 0), meta: { "title": "Breakpoints" } }],
+  ["/layout/columns.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "layout_columns.html" */
+    "./columns.html-DRAqgR3h.js"
+  ), true ? [] : void 0), meta: { "title": "Columns" } }],
+  ["/layout/containers.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "layout_containers.html" */
+    "./containers.html-DgTza5yR.js"
+  ), true ? [] : void 0), meta: { "title": "Containers" } }],
+  ["/layout/grid.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "layout_grid.html" */
+    "./grid.html-t8D6bS23.js"
+  ), true ? [] : void 0), meta: { "title": "Grid" } }],
+  ["/layout/gutters.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "layout_gutters.html" */
+    "./gutters.html-SyYvHCgl.js"
+  ), true ? [] : void 0), meta: { "title": "Gutters" } }],
   ["/migration/v4.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "migration_v4.html" */
-    "./v4.html-Br_AIuga.js"
+    "./v4.html-qK__BZTD.js"
   ), true ? [] : void 0), meta: { "title": "Migration to v4" } }],
   ["/migration/v5.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "migration_v5.html" */
-    "./v5.html-D8yxOVYF.js"
+    "./v5.html-Csxq3zcX.js"
   ), true ? [] : void 0), meta: { "title": "Migration to v5" } }],
   ["/templates/admin-dashboard.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "templates_admin-dashboard.html" */
-    "./admin-dashboard.html-DU-BWvUG.js"
+    "./admin-dashboard.html-CseRtZFD.js"
   ), true ? [] : void 0), meta: { "title": "Vue Templates" } }],
   ["/templates/contents.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "templates_contents.html" */
-    "./contents.html-CKe33LGP.js"
+    "./contents.html-41bLmuls.js"
   ), true ? [] : void 0), meta: { "title": "Vue templates contents" } }],
   ["/templates/customize.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "templates_customize.html" */
-    "./customize.html-CNlse-Z8.js"
+    "./customize.html-C0-AGXsg.js"
   ), true ? [] : void 0), meta: { "title": "Customize vue templates" } }],
   ["/templates/download.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "templates_download.html" */
-    "./download.html-91eC3PyH.js"
+    "./download.html-B0ATzToD.js"
   ), true ? [] : void 0), meta: { "title": "Download vue templates" } }],
   ["/templates/installation.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "templates_installation.html" */
-    "./installation.html-B9oaQNAO.js"
+    "./installation.html-CwOfF37v.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"
+    "./CAlert.api.html-BXIVhpa9.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"
+    "./CAlertHeading.api.html-BKJ9BC30.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"
+    "./CAlertLink.api.html-DG0vJpCf.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/accordion/CAccordion.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_accordion_CAccordion.api.html" */
-    "./CAccordion.api.html-BmmCbR4F.js"
+    "./CAccordion.api.html-B6uisqsk.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/accordion/CAccordionBody.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_accordion_CAccordionBody.api.html" */
-    "./CAccordionBody.api.html-DnDWpn--.js"
+    "./CAccordionBody.api.html-BxSpa71p.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/accordion/CAccordionButton.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_accordion_CAccordionButton.api.html" */
-    "./CAccordionButton.api.html-BFZVkVlR.js"
+    "./CAccordionButton.api.html-DPUd2qPX.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/accordion/CAccordionHeader.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_accordion_CAccordionHeader.api.html" */
-    "./CAccordionHeader.api.html-D3E3-RrY.js"
+    "./CAccordionHeader.api.html-DhPR4UFM.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/accordion/CAccordionItem.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_accordion_CAccordionItem.api.html" */
-    "./CAccordionItem.api.html-B_Gvnaeq.js"
+    "./CAccordionItem.api.html-DZGPOsD9.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/avatar/CAvatar.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_avatar_CAvatar.api.html" */
-    "./CAvatar.api.html-BTqEczbV.js"
+    "./CAvatar.api.html-CKyQof1f.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/backdrop/CBackdrop.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_backdrop_CBackdrop.api.html" */
-    "./CBackdrop.api.html-DAmzayp3.js"
+    "./CBackdrop.api.html-BlEIpUAI.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/badge/CBadge.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_badge_CBadge.api.html" */
-    "./CBadge.api.html-CgAts6f4.js"
+    "./CBadge.api.html-FxK3PsZy.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/breadcrumb/CBreadcrumb.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_breadcrumb_CBreadcrumb.api.html" */
-    "./CBreadcrumb.api.html-DqwjKss4.js"
+    "./CBreadcrumb.api.html-5lgjZmeY.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/breadcrumb/CBreadcrumbItem.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_breadcrumb_CBreadcrumbItem.api.html" */
-    "./CBreadcrumbItem.api.html-r9RgIwJD.js"
+    "./CBreadcrumbItem.api.html-CPH_CfEm.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/button/CButton.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_button_CButton.api.html" */
-    "./CButton.api.html-ekRjLD2P.js"
+    "./CButton.api.html-CiQ_g2gW.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-D0mJf4Og.js"
+    "./CButtonGroup.api.html-BVG1ANZ_.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-IKoND_KL.js"
+    "./CButtonToolbar.api.html-BLBUlnfS.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/calendar/CCalendar.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_calendar_CCalendar.api.html" */
-    "./CCalendar.api.html-C4aT9FYA.js"
+    "./CCalendar.api.html-77BmaEcE.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/callout/CCallout.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_callout_CCallout.api.html" */
-    "./CCallout.api.html-DiF4unWf.js"
+    "./CCallout.api.html-KoizcUs-.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/card/CCard.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_card_CCard.api.html" */
-    "./CCard.api.html-BmbaZsmK.js"
+    "./CCard.api.html-CWzyD8X0.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/card/CCardBody.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_card_CCardBody.api.html" */
-    "./CCardBody.api.html-D0-tGYrD.js"
+    "./CCardBody.api.html-BECQVBUH.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/card/CCardFooter.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_card_CCardFooter.api.html" */
-    "./CCardFooter.api.html-CiSjk2NS.js"
+    "./CCardFooter.api.html-CI_3qzYg.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/card/CCardGroup.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_card_CCardGroup.api.html" */
-    "./CCardGroup.api.html-BABSBoJe.js"
+    "./CCardGroup.api.html-DH7EZxGl.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/card/CCardHeader.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_card_CCardHeader.api.html" */
-    "./CCardHeader.api.html-D5ZqQVdw.js"
+    "./CCardHeader.api.html-CWFYp2G5.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/card/CCardImage.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_card_CCardImage.api.html" */
-    "./CCardImage.api.html-BBnb9-GW.js"
+    "./CCardImage.api.html-CUCskHkB.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/card/CCardImageOverlay.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_card_CCardImageOverlay.api.html" */
-    "./CCardImageOverlay.api.html-TpPKznie.js"
+    "./CCardImageOverlay.api.html-CNgKoO9s.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/card/CCardLink.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_card_CCardLink.api.html" */
-    "./CCardLink.api.html-MlyoVRZ4.js"
+    "./CCardLink.api.html-Dxett-Ui.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/card/CCardSubtitle.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_card_CCardSubtitle.api.html" */
-    "./CCardSubtitle.api.html-Cl-ezx9Z.js"
+    "./CCardSubtitle.api.html-Dh4UbxxY.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/card/CCardText.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_card_CCardText.api.html" */
-    "./CCardText.api.html-CeB8bETl.js"
+    "./CCardText.api.html-Bg0_JF9j.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/card/CCardTitle.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_card_CCardTitle.api.html" */
-    "./CCardTitle.api.html-BIewfA00.js"
+    "./CCardTitle.api.html-Cvqug47a.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-DVHA5VBo.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/carousel/CCarousel.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_carousel_CCarousel.api.html" */
-    "./CCarousel.api.html-B6WYH3KM.js"
+    "./CCarousel.api.html-DvQ7vBAQ.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/carousel/CCarouselCaption.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_carousel_CCarouselCaption.api.html" */
-    "./CCarouselCaption.api.html-CJ2Co3Eg.js"
+    "./CCarouselCaption.api.html-Ry9R9ID5.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/carousel/CCarouselItem.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_carousel_CCarouselItem.api.html" */
-    "./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-X5Fmd0Tk.js"
+    "./CCarouselItem.api.html-CQ58r3xO.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/collapse/CCollapse.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_collapse_CCollapse.api.html" */
-    "./CCollapse.api.html-zVmsFw74.js"
+    "./CCollapse.api.html-CxTOAM8U.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-7PMLb_Wk.js"
+    "./CConditionalTeleport.api.html-BsPLiQQG.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"
+    "./CDatePicker.api.html-C1Ro8UbJ.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-Hlubmql2.js"
+    "./CDateRangePicker.api.html-BXCpvTjX.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/dropdown/CDropdown.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_dropdown_CDropdown.api.html" */
-    "./CDropdown.api.html-DGIxjfQ3.js"
+    "./CDropdown.api.html-DVi36nMQ.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/dropdown/CDropdownDivider.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_dropdown_CDropdownDivider.api.html" */
-    "./CDropdownDivider.api.html-VSQ_XlFl.js"
+    "./CDropdownDivider.api.html-DRPOqN6s.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/dropdown/CDropdownHeader.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_dropdown_CDropdownHeader.api.html" */
-    "./CDropdownHeader.api.html-Cxpz-KV-.js"
+    "./CDropdownHeader.api.html-BFaZEh4a.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/dropdown/CDropdownItem.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_dropdown_CDropdownItem.api.html" */
-    "./CDropdownItem.api.html-BVulLqSR.js"
+    "./CDropdownItem.api.html-YfOt4ZPU.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"
+    "./CDropdownMenu.api.html-BOqkAy5z.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"
+    "./CDropdownToggle.api.html-TBTSZRQO.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"
+    "./CFooter.api.html-DCPx9oeQ.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/grid/CCol.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_grid_CCol.api.html" */
+    "./CCol.api.html-Fe-NnVcD.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/grid/CContainer.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_grid_CContainer.api.html" */
+    "./CContainer.api.html-O3JlICl7.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/grid/CRow.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_grid_CRow.api.html" */
+    "./CRow.api.html-BfZBZHbO.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/image/CImage.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_image_CImage.api.html" */
+    "./CImage.api.html-1rNq-hNU.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/header/CHeader.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_header_CHeader.api.html" */
+    "./CHeader.api.html-DlxZXRgK.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/header/CHeaderBrand.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_header_CHeaderBrand.api.html" */
+    "./CHeaderBrand.api.html-CFKRvz1W.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/header/CHeaderDivider.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_header_CHeaderDivider.api.html" */
+    "./CHeaderDivider.api.html-WXk5c_Vn.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/header/CHeaderNav.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_header_CHeaderNav.api.html" */
+    "./CHeaderNav.api.html-BG2UOwMu.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/header/CHeaderText.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_header_CHeaderText.api.html" */
+    "./CHeaderText.api.html-DpmaCM7o.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/header/CHeaderToggler.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_header_CHeaderToggler.api.html" */
+    "./CHeaderToggler.api.html-BQ00oQEl.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CForm.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CForm.api.html" */
-    "./CForm.api.html-2ixEm0A1.js"
+    "./CForm.api.html-D6NiMRuP.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormCheck.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormCheck.api.html" */
-    "./CFormCheck.api.html-Bf9lhFvH.js"
+    "./CFormCheck.api.html-Bl-fuUMn.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormControl.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormControl.api.html" */
-    "./CFormControl.api.html-D9-r3st8.js"
+    "./CFormControl.api.html-BEVjOQjL.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormControlValidation.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormControlValidation.api.html" */
-    "./CFormControlValidation.api.html-CDKpaVG3.js"
+    "./CFormControlValidation.api.html-fn-8iM1r.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormControlWrapper.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormControlWrapper.api.html" */
-    "./CFormControlWrapper.api.html-D75G__Lh.js"
+    "./CFormControlWrapper.api.html-BYVnVI9z.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormFeedback.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormFeedback.api.html" */
-    "./CFormFeedback.api.html-Cs8xHqDe.js"
+    "./CFormFeedback.api.html-C33zL_Pk.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormFloating.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormFloating.api.html" */
-    "./CFormFloating.api.html-C-X3BFM6.js"
+    "./CFormFloating.api.html-CqfeIH6c.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormInput.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormInput.api.html" */
-    "./CFormInput.api.html-CVvr0T_h.js"
+    "./CFormInput.api.html-BDOLWxtk.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormLabel.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormLabel.api.html" */
-    "./CFormLabel.api.html-CpQQKu1b.js"
+    "./CFormLabel.api.html-C3nnUCqL.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormRange.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormRange.api.html" */
-    "./CFormRange.api.html-C4Wns1Lr.js"
+    "./CFormRange.api.html-C9Fi8SJ1.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormSelect.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormSelect.api.html" */
-    "./CFormSelect.api.html-4dvFandI.js"
+    "./CFormSelect.api.html-Dz_dg5lQ.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormSwitch.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormSwitch.api.html" */
-    "./CFormSwitch.api.html-CyrjItfh.js"
+    "./CFormSwitch.api.html-BACw_Adx.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormText.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormText.api.html" */
-    "./CFormText.api.html-CpJOPSQg.js"
+    "./CFormText.api.html-BJqLcA9t.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CFormTextarea.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CFormTextarea.api.html" */
-    "./CFormTextarea.api.html-DMhqjvWY.js"
+    "./CFormTextarea.api.html-C-PBE2Mw.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CInputGroup.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CInputGroup.api.html" */
-    "./CInputGroup.api.html-B9Jacvbh.js"
+    "./CInputGroup.api.html-O1rxMtka.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/form/CInputGroupText.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_form_CInputGroupText.api.html" */
-    "./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-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-4A7AgRNX.js"
-  ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/header/CHeaderDivider.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_header_CHeaderDivider.api.html" */
-    "./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-Bbsph2xH.js"
-  ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/header/CHeaderText.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_header_CHeaderText.api.html" */
-    "./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-BlIes8qe.js"
-  ), true ? [] : void 0), meta: { "title": "" } }],
-  ["/api/image/CImage.api.html", { loader: () => __vitePreload(() => import(
-    /* webpackChunkName: "api_image_CImage.api.html" */
-    "./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-6FAjEedH.js"
+    "./CInputGroupText.api.html-CjjBv0Qa.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-CWB2ebuP.js"
+    "./CListGroup.api.html-BoJSzdjE.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-B75RiEoP.js"
+    "./CListGroupItem.api.html-QGIAoVEf.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"
+    "./CLoadingButton.api.html-BBbFgjn5.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/modal/CModal.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_modal_CModal.api.html" */
-    "./CModal.api.html-8P7cw-ZY.js"
+    "./CModal.api.html-CcahfjI1.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/modal/CModalBody.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_modal_CModalBody.api.html" */
-    "./CModalBody.api.html-CHE1pY1A.js"
+    "./CModalBody.api.html-BVcd8oVP.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/modal/CModalFooter.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_modal_CModalFooter.api.html" */
-    "./CModalFooter.api.html-BsNGmVfu.js"
+    "./CModalFooter.api.html-BOfY4tP-.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/modal/CModalHeader.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_modal_CModalHeader.api.html" */
-    "./CModalHeader.api.html-Dg9LwxqA.js"
+    "./CModalHeader.api.html-DoHVd2NU.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/modal/CModalTitle.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_modal_CModalTitle.api.html" */
-    "./CModalTitle.api.html-BBDuhOrq.js"
+    "./CModalTitle.api.html-ZPHhqxhp.js"
+  ), true ? [] : void 0), meta: { "title": "" } }],
+  ["/api/link/CLink.api.html", { loader: () => __vitePreload(() => import(
+    /* webpackChunkName: "api_link_CLink.api.html" */
+    "./CLink.api.html-CkkUHkLl.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"
+    "./CMultiSelect.api.html-DieqOVIP.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"
+    "./CMultiSelectNativeSelect.api.html-CIhoy8ZE.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"
+    "./CMultiSelectOptions.api.html-DtAlk_Hc.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"
+    "./CMultiSelectSelection.api.html-CUdfepD8.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/nav/CNav.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_nav_CNav.api.html" */
-    "./CNav.api.html-CHflKJ-r.js"
+    "./CNav.api.html-BFqXbscE.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/nav/CNavGroup.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_nav_CNavGroup.api.html" */
-    "./CNavGroup.api.html-B69rD5K0.js"
+    "./CNavGroup.api.html-CQwUJgTt.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/nav/CNavGroupItems.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_nav_CNavGroupItems.api.html" */
-    "./CNavGroupItems.api.html-MzViYoW-.js"
+    "./CNavGroupItems.api.html-B0aFIsJL.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/nav/CNavItem.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_nav_CNavItem.api.html" */
-    "./CNavItem.api.html-BluVGAkl.js"
+    "./CNavItem.api.html-D9aqO2xw.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/nav/CNavLink.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_nav_CNavLink.api.html" */
-    "./CNavLink.api.html-BLbL7bWh.js"
+    "./CNavLink.api.html-2gObI4eE.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/nav/CNavTitle.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_nav_CNavTitle.api.html" */
-    "./CNavTitle.api.html-B5pzzmsO.js"
+    "./CNavTitle.api.html-jwhtM3Ht.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/navbar/CNavbar.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_navbar_CNavbar.api.html" */
-    "./CNavbar.api.html-D6jrKQQE.js"
+    "./CNavbar.api.html-Bpr_rlAN.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/navbar/CNavbarBrand.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_navbar_CNavbarBrand.api.html" */
-    "./CNavbarBrand.api.html-iAKNmT2K.js"
+    "./CNavbarBrand.api.html-wHe16RAc.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/navbar/CNavbarNav.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_navbar_CNavbarNav.api.html" */
-    "./CNavbarNav.api.html-DTmYoiRc.js"
+    "./CNavbarNav.api.html-BvIABqX_.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/navbar/CNavbarText.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_navbar_CNavbarText.api.html" */
-    "./CNavbarText.api.html-DhRgVY0Q.js"
+    "./CNavbarText.api.html-DXM-0CeX.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/navbar/CNavbarToggler.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_navbar_CNavbarToggler.api.html" */
-    "./CNavbarToggler.api.html-BHSE5jxT.js"
+    "./CNavbarToggler.api.html-Du6cS1F2.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/offcanvas/COffcanvas.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_offcanvas_COffcanvas.api.html" */
-    "./COffcanvas.api.html--9epuLuW.js"
+    "./COffcanvas.api.html-C1yrjIbI.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/offcanvas/COffcanvasBody.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_offcanvas_COffcanvasBody.api.html" */
-    "./COffcanvasBody.api.html-DpuEcC8p.js"
+    "./COffcanvasBody.api.html-Cuyu4m1t.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/offcanvas/COffcanvasHeader.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_offcanvas_COffcanvasHeader.api.html" */
-    "./COffcanvasHeader.api.html-CA3y4VF-.js"
+    "./COffcanvasHeader.api.html-C94tOX9J.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/offcanvas/COffcanvasTitle.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_offcanvas_COffcanvasTitle.api.html" */
-    "./COffcanvasTitle.api.html-BCDNOR0i.js"
+    "./COffcanvasTitle.api.html-DWPpS-Pe.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/pagination/CPagination.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_pagination_CPagination.api.html" */
-    "./CPagination.api.html-mFhXc4Yf.js"
+    "./CPagination.api.html-CDazWQCT.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/pagination/CPaginationItem.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_pagination_CPaginationItem.api.html" */
-    "./CPaginationItem.api.html-Bsa5oQkt.js"
+    "./CPaginationItem.api.html-CrJi52XB.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/pagination/CSmartPagination.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_pagination_CSmartPagination.api.html" */
-    "./CSmartPagination.api.html-CrCaD_lP.js"
+    "./CSmartPagination.api.html-CtPxYRy0.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/picker/CPicker.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_picker_CPicker.api.html" */
-    "./CPicker.api.html-Da5Hysn9.js"
+    "./CPicker.api.html-oSkyMXwU.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/placeholder/CPlaceholder.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_placeholder_CPlaceholder.api.html" */
-    "./CPlaceholder.api.html-CpcOzpbr.js"
+    "./CPlaceholder.api.html-TZhyRjR4.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/popover/CPopover.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_popover_CPopover.api.html" */
-    "./CPopover.api.html-ymVfjSSe.js"
+    "./CPopover.api.html-tQSUMLbj.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/progress/CProgress.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_progress_CProgress.api.html" */
-    "./CProgress.api.html-C-66SSng.js"
+    "./CProgress.api.html-DtBG3iso.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/progress/CProgressBar.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_progress_CProgressBar.api.html" */
-    "./CProgressBar.api.html-BjA2nShz.js"
+    "./CProgressBar.api.html-DbiY29uU.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/progress/CProgressStacked.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_progress_CProgressStacked.api.html" */
-    "./CProgressStacked.api.html-iS9rdju9.js"
+    "./CProgressStacked.api.html-D0_SIwt3.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/rating/CRating.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_rating_CRating.api.html" */
-    "./CRating.api.html-CbBSuHpA.js"
+    "./CRating.api.html-c48h2dsU.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/sidebar/CSidebar.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_sidebar_CSidebar.api.html" */
-    "./CSidebar.api.html-DaxOjldv.js"
+    "./CSidebar.api.html-CTwTsKKM.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/sidebar/CSidebarBrand.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_sidebar_CSidebarBrand.api.html" */
-    "./CSidebarBrand.api.html-CMvNigzU.js"
+    "./CSidebarBrand.api.html-BDwVBijp.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/sidebar/CSidebarFooter.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_sidebar_CSidebarFooter.api.html" */
-    "./CSidebarFooter.api.html-DG6rj4Di.js"
+    "./CSidebarFooter.api.html-9MYkXiDf.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/sidebar/CSidebarHeader.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_sidebar_CSidebarHeader.api.html" */
-    "./CSidebarHeader.api.html-UjLXre_-.js"
+    "./CSidebarHeader.api.html-CFlZhoRs.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/sidebar/CSidebarNav.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_sidebar_CSidebarNav.api.html" */
-    "./CSidebarNav.api.html-ZV8snc4P.js"
+    "./CSidebarNav.api.html-DPgns5YK.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/sidebar/CSidebarToggler.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_sidebar_CSidebarToggler.api.html" */
-    "./CSidebarToggler.api.html-CwaVG0LH.js"
+    "./CSidebarToggler.api.html-CCzfHjoN.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-BikuSyAw.js"
+    "./CSmartPagination.api.html-BtDrxSb-.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-DBtpefqV.js"
+    "./CSmartTable.api.html-DGm1bmhO.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-BnkPBl42.js"
+    "./CSmartTableBody.api.html-Ct54x_n5.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-Ca51YF0C.js"
+    "./CSmartTableCleaner.api.html-D3V7dsv2.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-B7_1b50f.js"
+    "./CSmartTableFilter.api.html-DUCc6wnW.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-DW9ZUntG.js"
+    "./CSmartTableHead.api.html-BObUzIwn.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-BqX7W_5v.js"
+    "./CSmartTableItemsPerPageSelector.api.html-BcdEUUOn.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/spinner/CSpinner.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_spinner_CSpinner.api.html" */
-    "./CSpinner.api.html-O0NhTV-x.js"
+    "./CSpinner.api.html-tz9ud1zw.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/table/CTable.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_table_CTable.api.html" */
-    "./CTable.api.html-D0dRnCW-.js"
+    "./CTable.api.html-DNonlxhT.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/table/CTableBody.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_table_CTableBody.api.html" */
-    "./CTableBody.api.html-BFPdQqw6.js"
+    "./CTableBody.api.html-BE5qkKGP.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/table/CTableCaption.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_table_CTableCaption.api.html" */
-    "./CTableCaption.api.html-MTWPlJR7.js"
+    "./CTableCaption.api.html-phSXI7iF.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/table/CTableDataCell.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_table_CTableDataCell.api.html" */
-    "./CTableDataCell.api.html-r0s-YiAY.js"
+    "./CTableDataCell.api.html-CTzr6HkH.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/table/CTableFoot.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_table_CTableFoot.api.html" */
-    "./CTableFoot.api.html-FVtyDTMQ.js"
+    "./CTableFoot.api.html-DcRu-Wur.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/table/CTableHead.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_table_CTableHead.api.html" */
-    "./CTableHead.api.html-CuaSabQj.js"
+    "./CTableHead.api.html-jC7mLOK8.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/table/CTableHeaderCell.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_table_CTableHeaderCell.api.html" */
-    "./CTableHeaderCell.api.html-DahKEodk.js"
+    "./CTableHeaderCell.api.html-BDiQC33l.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/table/CTableRow.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_table_CTableRow.api.html" */
-    "./CTableRow.api.html-Bh9JvciN.js"
+    "./CTableRow.api.html-BS0zN1Kr.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"
+    "./CTab.api.html-C_8FIEMx.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"
+    "./CTabContent.api.html-1j4Vrr4K.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"
+    "./CTabList.api.html-Cmt2uvE5.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"
+    "./CTabPane.api.html-CNWr2MmF.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"
+    "./CTabPanel.api.html-Civ-9a5a.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"
+    "./CTabs.api.html-DnMHi3vy.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-B1LPdULH.js"
+    "./CTimePicker.api.html-C_1ZXYrv.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-CKuM6oLe.js"
+    "./CTimePickerRollCol.api.html-BP01-pLv.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/toast/CToast.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_toast_CToast.api.html" */
-    "./CToast.api.html-CrpEOCPn.js"
+    "./CToast.api.html-CMbe9i1s.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/toast/CToastBody.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_toast_CToastBody.api.html" */
-    "./CToastBody.api.html-4viEj-di.js"
+    "./CToastBody.api.html-JaBADYAu.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/toast/CToastClose.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_toast_CToastClose.api.html" */
-    "./CToastClose.api.html-D5MPMBvN.js"
+    "./CToastClose.api.html-YQ6mj1QO.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/toast/CToastHeader.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_toast_CToastHeader.api.html" */
-    "./CToastHeader.api.html-Bp3krdZ3.js"
+    "./CToastHeader.api.html-Bb_cYC6K.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/toast/CToaster.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_toast_CToaster.api.html" */
-    "./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-OI5523Hm.js"
+    "./CToaster.api.html-DIlPMx7J.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"
+    "./CTooltip.api.html-BG1bcVkZ.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/widgets/CWidgetStatsA.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_widgets_CWidgetStatsA.api.html" */
-    "./CWidgetStatsA.api.html-DD_G_0XR.js"
+    "./CWidgetStatsA.api.html-CQAWIPeh.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/widgets/CWidgetStatsB.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_widgets_CWidgetStatsB.api.html" */
-    "./CWidgetStatsB.api.html-BDmKGNGc.js"
+    "./CWidgetStatsB.api.html-8R9003Ye.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/widgets/CWidgetStatsC.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_widgets_CWidgetStatsC.api.html" */
-    "./CWidgetStatsC.api.html-Ck65oxiQ.js"
+    "./CWidgetStatsC.api.html-BEjn1BPd.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/widgets/CWidgetStatsD.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_widgets_CWidgetStatsD.api.html" */
-    "./CWidgetStatsD.api.html-C6jHMRVC.js"
+    "./CWidgetStatsD.api.html-vMUwQLz_.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/widgets/CWidgetStatsE.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_widgets_CWidgetStatsE.api.html" */
-    "./CWidgetStatsE.api.html-WqFr1dq3.js"
+    "./CWidgetStatsE.api.html-8FNgCETA.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/api/widgets/CWidgetStatsF.api.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "api_widgets_CWidgetStatsF.api.html" */
-    "./CWidgetStatsF.api.html-DQOglbDZ.js"
+    "./CWidgetStatsF.api.html-Bs-3Tpfk.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-CYqYd6bS.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-B3u-PJZc.js"
+    "./CIcon.api.html-DXua_Pop.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"
+    "./CIconSvg.api.html-Bu8_TLiB.js"
   ), true ? [] : void 0), meta: { "title": "" } }],
   ["/404.html", { loader: () => __vitePreload(() => import(
     /* webpackChunkName: "404.html" */
-    "./404.html-RliG702a.js"
+    "./404.html-DU2TjE25.js"
   ), true ? [] : void 0), meta: { "title": "" } }]
 ]);
-function getDevtoolsGlobalHook$1() {
-  return getTarget$1().__VUE_DEVTOOLS_GLOBAL_HOOK__;
+function getDevtoolsGlobalHook() {
+  return getTarget().__VUE_DEVTOOLS_GLOBAL_HOOK__;
 }
-function getTarget$1() {
+function getTarget() {
   return typeof navigator !== "undefined" && typeof window !== "undefined" ? window : typeof globalThis !== "undefined" ? globalThis : {};
 }
-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() {
+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$1 !== void 0) {
-    return supported$1;
+  if (supported !== void 0) {
+    return supported;
   }
   if (typeof window !== "undefined" && window.performance) {
-    supported$1 = true;
-    perf$1 = 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$1 = true;
-    perf$1 = globalThis.perf_hooks.performance;
+    supported = true;
+    perf = globalThis.perf_hooks.performance;
   } else {
-    supported$1 = false;
+    supported = false;
   }
-  return supported$1;
+  return supported;
 }
-function now$1() {
-  return isPerformanceSupported$1() ? perf$1.now() : Date.now();
+function now() {
+  return isPerformanceSupported() ? perf.now() : Date.now();
 }
-let ApiProxy$1 = class ApiProxy {
+class ApiProxy {
   constructor(plugin, hook) {
     this.target = null;
     this.targetQueue = [];
@@ -10309,11 +10332,11 @@ let ApiProxy$1 = class ApiProxy {
         currentSettings = value;
       },
       now() {
-        return now$1();
+        return now();
       }
     };
     if (hook) {
-      hook.on(HOOK_PLUGIN_SETTINGS_SET$1, (pluginId, value) => {
+      hook.on(HOOK_PLUGIN_SETTINGS_SET, (pluginId, value) => {
         if (pluginId === this.plugin.id) {
           this.fallbacks.setSettings(value);
         }
@@ -10372,16 +10395,16 @@ let ApiProxy$1 = class ApiProxy {
       item.resolve(await this.target[item.method](...item.args));
     }
   }
-};
-function setupDevtoolsPlugin$1(pluginDescriptor, setupFn) {
+}
+function setupDevtoolsPlugin(pluginDescriptor, setupFn) {
   const descriptor = pluginDescriptor;
-  const target = getTarget$1();
-  const hook = getDevtoolsGlobalHook$1();
-  const enableProxy = isProxyAvailable$1 && descriptor.enableEarlyProxy;
+  const target = getTarget();
+  const hook = getDevtoolsGlobalHook();
+  const enableProxy = isProxyAvailable && descriptor.enableEarlyProxy;
   if (hook && (target.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__ || !enableProxy)) {
-    hook.emit(HOOK_SETUP$1, pluginDescriptor, setupFn);
+    hook.emit(HOOK_SETUP, pluginDescriptor, setupFn);
   } else {
-    const proxy = enableProxy ? new ApiProxy$1(descriptor, hook) : null;
+    const proxy = enableProxy ? new ApiProxy(descriptor, hook) : null;
     const list = target.__VUE_DEVTOOLS_PLUGINS__ = target.__VUE_DEVTOOLS_PLUGINS__ || [];
     list.push({
       pluginDescriptor: descriptor,
@@ -10394,7 +10417,7 @@ function setupDevtoolsPlugin$1(pluginDescriptor, setupFn) {
   }
 }
 /*!
-  * vue-router v4.4.0
+  * vue-router v4.4.3
   * (c) 2024 Eduardo San Martin Morote
   * @license MIT
   */
@@ -10796,7 +10819,7 @@ function useHistoryStateNavigation(base) {
 
 history.replaceState(history.state, '', url)
 
-You can find more information at https://next.router.vuejs.org/guide/migration/#usage-of-history-state.`);
+You can find more information at https://router.vuejs.org/guide/migration/#Usage-of-history-state`);
     }
     changeLocation(currentState.current, currentState, true);
     const state = assign$2({}, buildState(currentLocation.value, to2, null), { position: currentState.position + 1 }, data);
@@ -11258,7 +11281,7 @@ function createRouterMatcher(routes2, globalOptions) {
         normalizedRecord.path = parent.record.path + (path && connectingSlash + path);
       }
       if (normalizedRecord.path === "*") {
-        throw new Error('Catch all routes ("*") must now be defined using a param with a custom regexp.\nSee more at https://next.router.vuejs.org/guide/migration/#removed-star-or-catch-all-routes.');
+        throw new Error('Catch all routes ("*") must now be defined using a param with a custom regexp.\nSee more at https://router.vuejs.org/guide/migration/#Removed-star-or-catch-all-routes.');
       }
       matcher = createRouteRecordMatcher(normalizedRecord, parent, options);
       if (parent && path[0] === "/")
@@ -12005,7 +12028,7 @@ function addDevtools(app, router, matcher) {
     return;
   router.__hasDevtools = true;
   const id = routerId++;
-  setupDevtoolsPlugin$1({
+  setupDevtoolsPlugin({
     id: "org.vuejs.router" + (id ? "." + id : ""),
     label: "Vue Router",
     packageName: "vue-router",
@@ -12378,7 +12401,7 @@ function createRouter(options) {
   const stringifyQuery$1 = options.stringifyQuery || stringifyQuery;
   const routerHistory = options.history;
   if (!routerHistory)
-    throw new Error('Provide the "history" option when calling "createRouter()": https://next.router.vuejs.org/api/#history.');
+    throw new Error('Provide the "history" option when calling "createRouter()": https://router.vuejs.org/api/interfaces/RouterOptions.html#history');
   const beforeGuards = useCallbacks();
   const beforeResolveGuards = useCallbacks();
   const afterGuards = useCallbacks();
@@ -13163,155 +13186,7 @@ var withBase = (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$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":"Calendar","link":"/components/calendar.html","badge":{"color":"danger","text":"PRO"}},{"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;
 const themeLocaleDataSymbol = Symbol("");
@@ -13350,6 +13225,7 @@ const config$3 = defineClientConfig({
     {
       setupDevtoolsPlugin({
         // fix recursive reference
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
         app,
         id: "org.vuejs.vuepress.plugin-theme-data",
         label: "VuePress Theme Data Plugin",
@@ -13444,10 +13320,10 @@ const resolveSidebarItems = (frontmatter, themeLocale) => {
     return resolveAutoSidebarItems(sidebarDepth);
   }
   if (Array.isArray(sidebarConfig)) {
-    return resolveArraySidebarItems(sidebarConfig, sidebarDepth);
+    return resolveArraySidebarItems(sidebarConfig);
   }
   if (isPlainObject$3(sidebarConfig)) {
-    return resolveMultiSidebarItems(sidebarConfig, sidebarDepth);
+    return resolveMultiSidebarItems(sidebarConfig);
   }
   return [];
 };
@@ -13467,10 +13343,9 @@ const resolveAutoSidebarItems = (sidebarDepth) => {
   ];
 };
 const resolveArraySidebarItems = (sidebarConfig, sidebarDepth) => {
-  const route = useRoute();
-  const page = usePageData();
+  useRoute();
+  usePageData();
   const handleChildItem = (item) => {
-    var _a2;
     let childItem;
     if (isString(item)) {
       childItem = useNavLink(item);
@@ -13483,13 +13358,6 @@ const resolveArraySidebarItems = (sidebarConfig, sidebarDepth) => {
         children: childItem.children.map((item2) => handleChildItem(item2))
       };
     }
-    if (childItem.link === route.path) {
-      const headers = ((_a2 = page.value.headers[0]) == null ? void 0 : _a2.level) === 1 ? page.value.headers[0].children : page.value.headers;
-      return {
-        ...childItem,
-        children: headersToSidebarItemChildren(headers, sidebarDepth)
-      };
-    }
     return childItem;
   };
   return sidebarConfig.map((item) => handleChildItem(item));
@@ -13498,7 +13366,7 @@ const resolveMultiSidebarItems = (sidebarConfig, sidebarDepth) => {
   const route = useRoute();
   const sidebarPath = resolveLocalePath(sidebarConfig, route.path);
   const matchedSidebarConfig = sidebarConfig[sidebarPath] ?? [];
-  return resolveArraySidebarItems(matchedSidebarConfig, sidebarDepth);
+  return resolveArraySidebarItems(matchedSidebarConfig);
 };
 /*! @docsearch/js 3.6.1 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */
 function e(e2, t2) {
@@ -17542,9 +17410,7 @@ const convertToDateObject = (date, selectionType) => {
   if (selectionType === "week") {
     return convertIsoWeekToDate(date);
   }
-  const _date = new Date(Date.parse(date));
-  const userTimezoneOffset = _date.getTimezoneOffset() * 6e4;
-  return new Date(_date.getTime() + userTimezoneOffset);
+  return new Date(Date.parse(date));
 };
 const createGroupsInArray = (arr, numberOfGroups) => {
   const perGroup = Math.ceil(arr.length / numberOfGroups);
@@ -17721,6 +17587,42 @@ const removeTimeFromDate = (date) => new Date(date.getFullYear(), date.getMonth(
 const CCalendar = /* @__PURE__ */ defineComponent({
   name: "CCalendar",
   props: {
+    /**
+     * A string that provides an accessible label for the button that navigates to the next month in the calendar. This label is read by screen readers to describe the action associated with the button.
+     *
+     * @since 5.4.0
+     */
+    ariaNavNextMonthLabel: {
+      type: String,
+      default: "Next month"
+    },
+    /**
+     * A string that provides an accessible label for the button that navigates to the next year in the calendar. This label is intended for screen readers to help users understand the button's functionality.
+     *
+     * @since 5.4.0
+     */
+    ariaNavNextYearLabel: {
+      type: String,
+      default: "Next year"
+    },
+    /**
+     * A string that provides an accessible label for the button that navigates to the previous month in the calendar. Screen readers will use this label to explain the purpose of the button.
+     *
+     * @since 5.4.0
+     */
+    ariaNavPrevMonthLabel: {
+      type: String,
+      default: "Previous month"
+    },
+    /**
+     * A string that provides an accessible label for the button that navigates to the previous year in the calendar. This label helps screen reader users understand the button's function.
+     *
+     * @since 5.4.0
+     */
+    ariaNavPrevYearLabel: {
+      type: String,
+      default: "Previous year"
+    },
     /**
      * Default date of the component
      */
@@ -18189,7 +18091,10 @@ const CCalendar = /* @__PURE__ */ defineComponent({
             weekDays.map(({ date }) => {
               return h$2(
                 "th",
-                { class: "calendar-cell" },
+                {
+                  class: "calendar-cell",
+                  abbr: date.toLocaleDateString(props.locale, { weekday: "long" })
+                },
                 h$2(
                   "div",
                   {
@@ -18215,6 +18120,7 @@ const CCalendar = /* @__PURE__ */ defineComponent({
               maxDate.value,
               props.disabledDates
             );
+            const isSelected = isDateSelected(date, startDate.value, endDate.value);
             const current = week.days.some((day) => day.month === "current");
             return h$2(
               "tr",
@@ -18225,10 +18131,11 @@ const CCalendar = /* @__PURE__ */ defineComponent({
                     disabled: isDisabled,
                     range: props.selectionType === "week" && isDateInRange(date, startDate.value, endDate.value),
                     "range-hover": props.selectionType === "week" && hoverDate.value && selectEndDate.value ? isDateInRange(date, startDate.value, hoverDate.value) : isDateInRange(date, hoverDate.value, endDate.value),
-                    selected: isDateSelected(date, startDate.value, endDate.value)
+                    selected: isSelected
                   }
                 ],
                 tabindex: props.selectionType === "week" && current && !isDisabled ? 0 : -1,
+                ...isSelected && { "aria-selected": true },
                 ...props.selectionType === "week" && !isDisabled && {
                   onBlur: () => handleCalendarMouseLeave(),
                   onClick: () => handleCalendarClick(date),
@@ -18251,6 +18158,7 @@ const CCalendar = /* @__PURE__ */ defineComponent({
                     maxDate.value,
                     props.disabledDates
                   );
+                  const isSelected2 = isDateSelected(date2, startDate.value, endDate.value);
                   return month === "current" || props.showAdjacementDays ? h$2(
                     "td",
                     {
@@ -18262,7 +18170,7 @@ const CCalendar = /* @__PURE__ */ defineComponent({
                             disabled: isDisabled2,
                             "range-hover": month === "current" && (hoverDate.value && selectEndDate.value ? isDateInRange(date2, startDate.value, hoverDate.value) : isDateInRange(date2, hoverDate.value, endDate.value)),
                             range: month === "current" && isDateInRange(date2, startDate.value, endDate.value),
-                            selected: isDateSelected(date2, startDate.value, endDate.value)
+                            selected: isSelected2
                           },
                           [month]: true,
                           today: month === "current" && isToday(date2)
@@ -18270,6 +18178,7 @@ const CCalendar = /* @__PURE__ */ defineComponent({
                       ],
                       tabindex: props.selectionType === "day" && (month === "current" || props.selectAdjacementDays) && !isDisabled2 ? 0 : -1,
                       title: date2.toLocaleDateString(props.locale),
+                      ...isSelected2 && { "aria-selected": true },
                       ...props.selectionType === "day" && (month === "current" || props.selectAdjacementDays) && {
                         onBlur: () => handleCalendarMouseLeave(),
                         onClick: () => handleCalendarClick(date2),
@@ -18309,6 +18218,7 @@ const CCalendar = /* @__PURE__ */ defineComponent({
                   maxDate.value,
                   props.disabledDates
                 );
+                const isSelected = isDateSelected(date, startDate.value, endDate.value);
                 return h$2(
                   "td",
                   {
@@ -18316,12 +18226,13 @@ const CCalendar = /* @__PURE__ */ defineComponent({
                       "calendar-cell",
                       {
                         disabled: isDisabled,
-                        selected: isDateSelected(date, startDate.value, endDate.value),
+                        selected: isSelected,
                         "range-hover": props.selectionType === "month" && (hoverDate.value && selectEndDate ? isDateInRange(date, startDate.value, hoverDate.value) : isDateInRange(date, hoverDate.value, endDate.value)),
                         range: isDateInRange(date, startDate.value, endDate.value)
                       }
                     ],
                     tabindex: isDisabled ? -1 : 0,
+                    ...isSelected && { "aria-selected": true },
                     ...!isDisabled && {
                       onBlur: () => handleCalendarMouseLeave(),
                       onClick: () => handleCalendarClick(date),
@@ -18348,6 +18259,7 @@ const CCalendar = /* @__PURE__ */ defineComponent({
                   maxDate.value,
                   props.disabledDates
                 );
+                const isSelected = isDateSelected(date, startDate.value, endDate.value);
                 return h$2(
                   "td",
                   {
@@ -18355,12 +18267,13 @@ const CCalendar = /* @__PURE__ */ defineComponent({
                       "calendar-cell year",
                       {
                         disabled: isDisabled,
-                        selected: isDateSelected(date, startDate.value, endDate.value),
+                        selected: isSelected,
                         "range-hover": props.selectionType === "year" && (hoverDate.value && selectEndDate ? isDateInRange(date, startDate.value, hoverDate.value) : isDateInRange(date, hoverDate.value, endDate.value)),
                         range: isDateInRange(date, startDate.value, endDate.value)
                       }
                     ],
                     tabindex: isDisabled ? -1 : 0,
+                    ...isSelected && { "aria-selected": true },
                     ...!isDisabled && {
                       onBlur: () => handleCalendarMouseLeave(),
                       onClick: () => handleCalendarClick(date),
@@ -18391,6 +18304,7 @@ const CCalendar = /* @__PURE__ */ defineComponent({
               {
                 color: "transparent",
                 size: "sm",
+                "aria-label": props.ariaNavPrevYearLabel,
                 onClick: () => handleNavigationOnClick("prev", true)
               },
               {
@@ -18405,6 +18319,7 @@ const CCalendar = /* @__PURE__ */ defineComponent({
               {
                 color: "transparent",
                 size: "sm",
+                "aria-label": props.ariaNavPrevMonthLabel,
                 onClick: () => handleNavigationOnClick("prev")
               },
               {
@@ -18420,6 +18335,7 @@ const CCalendar = /* @__PURE__ */ defineComponent({
           "div",
           {
             class: "calendar-nav-date",
+            "aria-live": "polite",
             ...props.navYearFirst && { style: { display: "flex", justifyContent: "center" } }
           },
           [
@@ -18459,6 +18375,7 @@ const CCalendar = /* @__PURE__ */ defineComponent({
               {
                 color: "transparent",
                 size: "sm",
+                "aria-label": props.ariaNavNextMonthLabel,
                 onClick: () => handleNavigationOnClick("next")
               },
               {
@@ -18473,6 +18390,7 @@ const CCalendar = /* @__PURE__ */ defineComponent({
               {
                 color: "transparent",
                 size: "sm",
+                "aria-label": props.ariaNavNextYearLabel,
                 onClick: () => handleNavigationOnClick("next", true)
               },
               {
@@ -19163,7 +19081,7 @@ const CConditionalTeleport = /* @__PURE__ */ defineComponent({
     /**
      * An HTML element or function that returns a single element, with `document.body` as the default.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     container: {
       type: [Object, String],
@@ -21897,6 +21815,42 @@ const getLocalDateFromString = (string, locale, time) => {
 const CDateRangePicker = /* @__PURE__ */ defineComponent({
   name: "CDateRangePicker",
   props: {
+    /**
+     * A string that provides an accessible label for the button that navigates to the next month in the calendar. This label is read by screen readers to describe the action associated with the button.
+     *
+     * @since 5.4.0
+     */
+    ariaNavNextMonthLabel: {
+      type: String,
+      default: "Next month"
+    },
+    /**
+     * A string that provides an accessible label for the button that navigates to the next year in the calendar. This label is intended for screen readers to help users understand the button's functionality.
+     *
+     * @since 5.4.0
+     */
+    ariaNavNextYearLabel: {
+      type: String,
+      default: "Next year"
+    },
+    /**
+     * A string that provides an accessible label for the button that navigates to the previous month in the calendar. Screen readers will use this label to explain the purpose of the button.
+     *
+     * @since 5.4.0
+     */
+    ariaNavPrevMonthLabel: {
+      type: String,
+      default: "Previous month"
+    },
+    /**
+     * A string that provides an accessible label for the button that navigates to the previous year in the calendar. This label helps screen reader users understand the button's function.
+     *
+     * @since 5.4.0
+     */
+    ariaNavPrevYearLabel: {
+      type: String,
+      default: "Previous year"
+    },
     /**
      * The number of calendars that render on desktop devices.
      */
@@ -22739,6 +22693,10 @@ const CDateRangePicker = /* @__PURE__ */ defineComponent({
                   h$2(
                     CCalendar,
                     {
+                      ariaNavNextMonthLabel: props.ariaNavNextMonthLabel,
+                      ariaNavNextYearLabel: props.ariaNavNextYearLabel,
+                      ariaNavPrevMonthLabel: props.ariaNavPrevMonthLabel,
+                      ariaNavPrevYearLabel: props.ariaNavPrevYearLabel,
                       calendarDate: calendarDate.value,
                       calendars: isMobile.value ? 1 : props.calendars,
                       class: "date-picker-calendars",
@@ -22845,6 +22803,42 @@ const CDateRangePickerPlugin = {
 const CDatePicker = /* @__PURE__ */ defineComponent({
   name: "CDatePicker",
   props: {
+    /**
+     * A string that provides an accessible label for the button that navigates to the next month in the calendar. This label is read by screen readers to describe the action associated with the button.
+     *
+     * @since 5.4.0
+     */
+    ariaNavNextMonthLabel: {
+      type: String,
+      default: "Next month"
+    },
+    /**
+     * A string that provides an accessible label for the button that navigates to the next year in the calendar. This label is intended for screen readers to help users understand the button's functionality.
+     *
+     * @since 5.4.0
+     */
+    ariaNavNextYearLabel: {
+      type: String,
+      default: "Next year"
+    },
+    /**
+     * A string that provides an accessible label for the button that navigates to the previous month in the calendar. Screen readers will use this label to explain the purpose of the button.
+     *
+     * @since 5.4.0
+     */
+    ariaNavPrevMonthLabel: {
+      type: String,
+      default: "Previous month"
+    },
+    /**
+     * A string that provides an accessible label for the button that navigates to the previous year in the calendar. This label helps screen reader users understand the button's function.
+     *
+     * @since 5.4.0
+     */
+    ariaNavPrevYearLabel: {
+      type: String,
+      default: "Previous year"
+    },
     /**
      * Default date of the component
      */
@@ -23280,7 +23274,7 @@ const CDropdown = /* @__PURE__ */ defineComponent({
     /**
      * Appends the vue dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     container: {
       type: [Object, String],
@@ -23333,7 +23327,7 @@ const CDropdown = /* @__PURE__ */ defineComponent({
     /**
      * Generates dropdown menu using Teleport.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     teleport: {
       type: Boolean,
@@ -23636,7 +23630,7 @@ const CDropdownToggle = /* @__PURE__ */ defineComponent({
     /**
      * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     navLink: {
       type: Boolean,
@@ -25221,6 +25215,13 @@ const CGridPlugin = {
 const CHeader = /* @__PURE__ */ defineComponent({
   name: "CHeader",
   props: {
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    as: {
+      type: String,
+      default: "div"
+    },
     /**
      * Defines optional container wrapping children elements.
      *
@@ -25246,7 +25247,7 @@ const CHeader = /* @__PURE__ */ defineComponent({
   },
   setup(props, { slots }) {
     return () => h$2(
-      "div",
+      props.as,
       { class: ["header", { [`header-${props.position}`]: props.position }] },
       props.container ? h$2(
         "div",
@@ -25596,6 +25597,15 @@ const CModal = /* @__PURE__ */ defineComponent({
         return false;
       }
     },
+    /**
+     * Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
+     *
+     * @since 5.3.0
+     */
+    container: {
+      type: [Object, String],
+      default: "body"
+    },
     /**
      * A string of all className you want applied to the modal content component.
      */
@@ -25603,7 +25613,7 @@ const CModal = /* @__PURE__ */ defineComponent({
     /**
      * Puts the focus on the modal when shown.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     focus: {
       type: Boolean,
@@ -25648,6 +25658,15 @@ const CModal = /* @__PURE__ */ defineComponent({
         return ["sm", "lg", "xl"].includes(value);
       }
     },
+    /**
+     * Generates modal using Teleport.
+     *
+     * @since 5.3.0
+     */
+    teleport: {
+      type: Boolean,
+      default: false
+    },
     /**
      * Remove animation to create modal that simply appear rather than fade in to view.
      */
@@ -25797,23 +25816,32 @@ const CModal = /* @__PURE__ */ defineComponent({
         )
       )
     );
-    return () => [
-      h$2(
-        Transition,
-        {
-          css: false,
-          onEnter: (el, done) => handleEnter(el, done),
-          onAfterEnter: () => handleAfterEnter(),
-          onLeave: (el, done) => handleLeave(el, done),
-          onAfterLeave: (el) => handleAfterLeave(el)
-        },
-        () => props.unmountOnClose ? visible.value && modal2() : withDirectives(modal2(), [[vShow, visible.value]])
-      ),
-      props.backdrop && h$2(CBackdrop, {
-        class: "modal-backdrop",
-        visible: visible.value
-      })
-    ];
+    return () => h$2(
+      CConditionalTeleport,
+      {
+        container: props.container,
+        teleport: props.teleport
+      },
+      {
+        default: () => [
+          h$2(
+            Transition,
+            {
+              css: false,
+              onEnter: (el, done) => handleEnter(el, done),
+              onAfterEnter: () => handleAfterEnter(),
+              onLeave: (el, done) => handleLeave(el, done),
+              onAfterLeave: (el) => handleAfterLeave(el)
+            },
+            () => props.unmountOnClose ? visible.value && modal2() : withDirectives(modal2(), [[vShow, visible.value]])
+          ),
+          props.backdrop && h$2(CBackdrop, {
+            class: "modal-backdrop",
+            visible: visible.value
+          })
+        ]
+      }
+    );
   }
 });
 const CModalBody = /* @__PURE__ */ defineComponent({
@@ -27932,7 +27960,7 @@ const CPopover = /* @__PURE__ */ defineComponent({
     /**
      * Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     container: {
       type: [Object, String],
@@ -31764,7 +31792,7 @@ const CTooltip = /* @__PURE__ */ defineComponent({
     /**
      * Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     container: {
       type: [Object, String],
@@ -33708,13 +33736,8 @@ const isActiveItem = (route, item) => {
 };
 const SidebarNav = /* @__PURE__ */ defineComponent({
   name: "SidebarNav",
-  props: {
-    items: {
-      type: Array,
-      required: true
-    }
-  },
-  setup(props) {
+  setup() {
+    const sidebarItems = useSidebarItems();
     const route = useRoute();
     const firstRender = ref(true);
     onMounted(() => {
@@ -33750,10 +33773,10 @@ const SidebarNav = /* @__PURE__ */ defineComponent({
           custom: true
         },
         {
-          default: (props2) => h$2(
+          default: (props) => h$2(
             CNavItem,
             {
-              active: props2.isActive,
+              active: props.isActive,
               disabled: item.disabled,
               href: withBase(item.link)
             },
@@ -33780,7 +33803,7 @@ const SidebarNav = /* @__PURE__ */ defineComponent({
       CSidebarNav,
       {},
       {
-        default: () => props.items.map((item) => renderItem(item))
+        default: () => sidebarItems.value.map((item) => renderItem(item))
       }
     );
   }
@@ -33789,8 +33812,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "Sidebar",
   setup(__props, { expose: __expose }) {
     __expose();
-    const sidebarItems = useSidebarItems();
-    const __returned__ = { sidebarItems, get SidebarNav() {
+    const __returned__ = { get SidebarNav() {
       return SidebarNav;
     } };
     Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
@@ -33885,7 +33907,7 @@ function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
         ]),
         _: 1
       }),
-      createVNode($setup["SidebarNav"], { items: $setup.sidebarItems }, null, 8, ["items"])
+      createVNode($setup["SidebarNav"])
     ]),
     _: 1
   });
@@ -34248,7 +34270,7 @@ const useActiveHeaderLinks = ({ headerLinkSelector: headerLinkSelector2, headerA
     const scrollTop = Math.max(window.scrollY, document.documentElement.scrollTop, document.body.scrollTop);
     const isAtPageTop = Math.abs(scrollTop - 0) < offset2;
     if (isAtPageTop) {
-      updateHash(router, "");
+      void updateHash(router, "");
       return;
     }
     const scrollBottom = window.innerHeight + scrollTop;
@@ -34276,7 +34298,7 @@ const useActiveHeaderLinks = ({ headerLinkSelector: headerLinkSelector2, headerA
           }
         }
       }
-      updateHash(router, anchorHash);
+      void updateHash(router, anchorHash);
       return;
     }
   };
@@ -34302,7 +34324,8 @@ 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-BG7mA_TE.js"), true ? [] : void 0))), app.component("ScssDocs", /* @__PURE__ */ defineAsyncComponent(() => __vitePreload(() => import("./ScssDocs-BzcEAHFR.js"), true ? [] : void 0)));
+    app.component("Callout", /* @__PURE__ */ defineAsyncComponent(() => __vitePreload(() => import("./Callout-dZyg6Lm9.js"), true ? [] : void 0)));
+    app.component("ScssDocs", /* @__PURE__ */ defineAsyncComponent(() => __vitePreload(() => import("./ScssDocs-DPTK8YLD.js"), true ? [] : void 0)));
   }
 };
 const clientConfig3 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -34358,7 +34381,7 @@ const Toc = /* @__PURE__ */ defineComponent({
   props: {
     headers: {
       type: Array,
-      default: null
+      default: void 0
     },
     options: {
       type: Object,
@@ -34371,7 +34394,7 @@ const Toc = /* @__PURE__ */ defineComponent({
     const page = usePageData();
     const headers = computed(() => {
       var _a2;
-      const headersToUse = propsHeaders.value || page.value.headers;
+      const headersToUse = propsHeaders.value ?? page.value.headers;
       return ((_a2 = headersToUse[0]) == null ? void 0 : _a2.level) === 1 ? headersToUse[0].children : headersToUse;
     });
     const options = computed(() => ({
@@ -50727,7 +50750,7 @@ const client = defineClientConfig({
     app.provide("icons", icons);
     app.component("CIcon", CIcon);
     app.component("CIconSvg", CIconSvg);
-    app.use(CChartPlugin), router.addRoute({ path: "", redirect: "/getting-started/introduction.html" });
+    app.use(CChartPlugin), router.addRoute({ path: "/", redirect: "/getting-started/introduction.html" });
   }
 });
 const clientConfig5 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
@@ -50975,7 +50998,7 @@ var createVueApp = async () => {
   const globalComputed = setupGlobalComputed(app, router, clientConfigs);
   {
     const { setupDevtools } = await __vitePreload(async () => {
-      const { setupDevtools: setupDevtools2 } = await import("./setupDevtools-HHDGOOYC-BQImv-dR.js");
+      const { setupDevtools: setupDevtools2 } = await import("./setupDevtools-HHDGOOYC-8SYwYjCZ.js");
       return { setupDevtools: setupDevtools2 };
     }, true ? [] : void 0);
     setupDevtools(app, globalComputed);
@@ -50997,72 +51020,71 @@ var createVueApp = async () => {
   });
 }
 export {
-  mergeProps as $,
-  cilArrowTop as A,
-  cilBasket as B,
-  cilBurn as C,
-  cilCheckCircle as D,
-  cilCloudDownload as E,
+  toHandlers as $,
+  cilBurn as A,
+  cilCheckCircle as B,
+  cilCloudDownload as C,
+  cilContrast as D,
+  cilFilterX as E,
   Fragment as F,
-  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,
+  cilHandshake as G,
+  cilInfo as H,
+  cilLayers as I,
+  cilMenu as J,
+  cilMoon as K,
+  cilOptions as L,
+  cilPeople as M,
+  cilPuzzle as N,
+  cilSettings as O,
+  cilSpeedometer as P,
+  cilSun as Q,
+  cilSwapVertical as R,
+  cilUserFollow as S,
+  cilWarning as T,
+  CIcon as U,
+  createBlock as V,
+  createCommentVNode as W,
   resolveDirective as X,
   withDirectives as Y,
-  normalizeStyle as Z,
+  mergeProps as Z,
   _export_sfc as _,
   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,
+  defineComponent as a0,
+  h$2 as a1,
+  cloneVNode as a2,
+  createPopper as a3,
+  onUnmounted as a4,
+  onUpdated as a5,
+  nextTick as a6,
+  inject as a7,
+  computed as a8,
+  provide as a9,
+  onBeforeUnmount as aa,
+  renderSlot as ab,
+  createBaseVNode as b,
   createElementBlock as c,
   createVueApp,
-  withCtx as d,
-  createBaseVNode as e,
+  createVNode as d,
+  withCtx as e,
   createTextVNode as f,
   ref as g,
-  createBlock as h,
-  createCommentVNode as i,
-  renderList as j,
-  onMounted as k,
-  withModifiers as l,
-  cibCoreuiC as m,
+  renderList as h,
+  onMounted as i,
+  withModifiers as j,
+  cibCoreuiC as k,
+  cibDiscourse as l,
+  cibFacebook as m,
   normalizeClass as n,
   openBlock as o,
-  cibDiscourse as p,
-  cibFacebook as q,
+  cibGithub as p,
+  cibOpenCollective as q,
   resolveComponent as r,
   setupDevtoolsPlugin as s,
   toDisplayString as t,
-  cibGithub as u,
-  cibOpenCollective as v,
+  cibTwitter as u,
+  cilArrowBottom as v,
   watch as w,
-  cibTwitter as x,
-  cilArrowBottom as y,
-  cilArrowRight as z
+  cilArrowRight as x,
+  cilArrowTop as y,
+  cilBasket as z
 };
diff --git a/vue/docs/assets/avatar.html-CGvuFR7Q.js b/vue/docs/assets/avatar.html-BD-B4lfD.js
similarity index 84%
rename from vue/docs/assets/avatar.html-CGvuFR7Q.js
rename to vue/docs/assets/avatar.html-BD-B4lfD.js
index fc5749f2b32..091711c6bf5 100644
--- a/vue/docs/assets/avatar.html-CGvuFR7Q.js
+++ b/vue/docs/assets/avatar.html-BD-B4lfD.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "image-avatars",
@@ -7,15 +7,14 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Image avatars "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#image-avatars",
-    "aria-hidden": "true"
+    href: "#image-avatars"
   }, "#")
 ], -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_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">#</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_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">#</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",
@@ -41,17 +40,17 @@ const _hoisted_14 = /* @__PURE__ */ createBaseVNode("svg", {
   /* @__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_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">#</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_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">#</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_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">#</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_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">#</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);
+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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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">#</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">#</a></h3>', 3);
+const _hoisted_38 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cavatar" tabindex="-1">CAvatar <a class="anchor-link" href="#cavatar">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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");
diff --git a/vue/docs/assets/badge.html-BIxXbpUI.js b/vue/docs/assets/badge.html-Dear1jUq.js
similarity index 88%
rename from vue/docs/assets/badge.html-BIxXbpUI.js
rename to vue/docs/assets/badge.html-Dear1jUq.js
index 142bc84c3ee..95efce66f96 100644
--- a/vue/docs/assets/badge.html-BIxXbpUI.js
+++ b/vue/docs/assets/badge.html-Dear1jUq.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, f as createTextVNode, d as createVNode, e as withCtx, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "example",
@@ -7,8 +7,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Example "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#example",
-    "aria-hidden": "true"
+    href: "#example"
   }, "#")
 ], -1);
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
@@ -23,8 +22,7 @@ const _hoisted_3 = /* @__PURE__ */ createBaseVNode("h3", {
   /* @__PURE__ */ createTextVNode("Basic usage "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#basic-usage",
-    "aria-hidden": "true"
+    href: "#basic-usage"
   }, "#")
 ], -1);
 const _hoisted_4 = { class: "docs-example rounded-top p-4" };
@@ -33,7 +31,7 @@ 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>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><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-highlighter="prismjs" data-ext="vue" data-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_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">#</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);
@@ -43,15 +41,15 @@ const _hoisted_21 = /* @__PURE__ */ createBaseVNode("span", { class: "visually-h
 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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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);
+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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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">#</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">#</a></h3>', 3);
+const _hoisted_44 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cbadge" tabindex="-1">CBadge <a class="anchor-link" href="#cbadge">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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-DgLYIaPr.js
similarity index 79%
rename from vue/docs/assets/breadcrumb.html-3P6FIBpg.js
rename to vue/docs/assets/breadcrumb.html-DgLYIaPr.js
index 3b03f51eef7..1772b65d9a6 100644
--- a/vue/docs/assets/breadcrumb.html-3P6FIBpg.js
+++ b/vue/docs/assets/breadcrumb.html-DgLYIaPr.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "example",
@@ -7,21 +7,20 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Example "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#example",
-    "aria-hidden": "true"
+    href: "#example"
   }, "#")
 ], -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_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">#</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);
+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">#</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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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">#</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">#</a></h3>', 3);
+const _hoisted_28 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cbreadcrumbitem" tabindex="-1">CBreadcrumbItem <a class="anchor-link" href="#cbreadcrumbitem">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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");
diff --git a/vue/docs/assets/breakpoints.html-C6u5z98e.js b/vue/docs/assets/breakpoints.html-C6u5z98e.js
new file mode 100644
index 00000000000..3877975fcd0
--- /dev/null
+++ b/vue/docs/assets/breakpoints.html-C6u5z98e.js
@@ -0,0 +1,36 @@
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, d as createVNode, e as withCtx, a as createStaticVNode, f as createTextVNode, b as createBaseVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="core-concepts" tabindex="-1">Core concepts <a class="anchor-link" href="#core-concepts">#</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">#</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">#</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">#</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">#</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">#</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">#</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/breakpoints.html-TXDgB0cd.js b/vue/docs/assets/breakpoints.html-TXDgB0cd.js
deleted file mode 100644
index a19d2c5009c..00000000000
--- a/vue/docs/assets/breakpoints.html-TXDgB0cd.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, 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-DokwKiVg.js b/vue/docs/assets/button-group.html-7uksYI0F.js
similarity index 97%
rename from vue/docs/assets/button-group.html-DokwKiVg.js
rename to vue/docs/assets/button-group.html-7uksYI0F.js
index 45c16501b56..78874dc77a8 100644
--- a/vue/docs/assets/button-group.html-DokwKiVg.js
+++ b/vue/docs/assets/button-group.html-7uksYI0F.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "basic-example",
@@ -7,8 +7,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Basic example "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#basic-example",
-    "aria-hidden": "true"
+    href: "#basic-example"
   }, "#")
 ], -1);
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
@@ -19,33 +18,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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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);
+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">#</a></h2><h3 id="cbuttongroup" tabindex="-1">CButtonGroup <a class="anchor-link" href="#cbuttongroup">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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-Tm2d-w3G.js b/vue/docs/assets/button.html-D00S-NDK.js
similarity index 90%
rename from vue/docs/assets/button.html-Tm2d-w3G.js
rename to vue/docs/assets/button.html-D00S-NDK.js
index dfa88fc54ff..78d600f21db 100644
--- a/vue/docs/assets/button.html-Tm2d-w3G.js
+++ b/vue/docs/assets/button.html-D00S-NDK.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "examples",
@@ -7,19 +7,18 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Examples "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#examples",
-    "aria-hidden": "true"
+    href: "#examples"
   }, "#")
 ], -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-highlighter="prismjs" data-ext="vue" data-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_6 = /* @__PURE__ */ createStaticVNode('<h2 id="disable-text-wrapping" tabindex="-1">Disable text wrapping <a class="anchor-link" href="#disable-text-wrapping">#</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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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", {
@@ -29,8 +28,7 @@ const _hoisted_21 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Sizes "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#sizes",
-    "aria-hidden": "true"
+    href: "#sizes"
   }, "#")
 ], -1);
 const _hoisted_22 = /* @__PURE__ */ createBaseVNode("p", null, [
@@ -41,15 +39,15 @@ 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-highlighter="prismjs" data-ext="vue" data-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_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">#</a></h2><h3 id="pill-buttons" tabindex="-1">Pill buttons <a class="anchor-link" href="#pill-buttons">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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);
@@ -61,9 +59,9 @@ 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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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);
+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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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">#</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">#</a></h3>', 3);
+const _hoisted_64 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cbutton" tabindex="-1">CButton <a class="anchor-link" href="#cbutton">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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-Dj___bk9.js b/vue/docs/assets/calendar.html-Dj___bk9.js
new file mode 100644
index 00000000000..5d757d34299
--- /dev/null
+++ b/vue/docs/assets/calendar.html-Dj___bk9.js
@@ -0,0 +1,247 @@
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {
+  __name: "calendar.html",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    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 __returned__ = { calendarDate, disabledDates, maxDate, minDate };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+};
+const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
+  id: "example",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("Example "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#example"
+  }, "#")
+], -1);
+const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, "Explore the Vue Calendar component's basic usage through sample code snippets demonstrating 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"
+  }, "#")
+], -1);
+const _hoisted_4 = /* @__PURE__ */ createBaseVNode("p", null, "Select specific days using the Vue Calendar component. The example below shows basic usage.", -1);
+const _hoisted_5 = { class: "docs-example rounded-top p-4" };
+const _hoisted_6 = { class: "d-flex justify-content-center" };
+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>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 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>CCalendar</span> <span 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 rounded<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">startDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2024/02/13<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></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><h3 id="weeks" tabindex="-1">Weeks <a class="anchor-link" href="#weeks">#</a></h3><p>Set the <code>selectionType</code> to <code>week</code> to enable selection of entire week. You can also add <code>showWeekNumber</code> to show week numbers.</p>', 3);
+const _hoisted_10 = { class: "docs-example rounded-top p-4" };
+const _hoisted_11 = { class: "d-flex justify-content-center" };
+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>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 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>CCalendar</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>border rounded<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 attr-name">startDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2024W15<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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</a></h3><p>Set the <code>selectionType</code> property to <code>month</code> to enable selection of entire months.</p>', 3);
+const _hoisted_15 = { class: "docs-example rounded-top p-4" };
+const _hoisted_16 = { class: "d-flex justify-content-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>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 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>CCalendar</span> <span 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 rounded<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 attr-name">startDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2024-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>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><h3 id="years" tabindex="-1">Years <a class="anchor-link" href="#years">#</a></h3><p>Set the <code>selectionType</code> property to <code>year</code> to enable years range selection.</p>', 3);
+const _hoisted_20 = { class: "docs-example rounded-top p-4" };
+const _hoisted_21 = { class: "d-flex justify-content-center" };
+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>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 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>CCalendar</span> <span 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 rounded<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 attr-name">startDate</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>2024<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></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="multiple-calendar-panels" tabindex="-1">Multiple calendar panels <a class="anchor-link" href="#multiple-calendar-panels">#</a></h2><p>Display multiple calendar panels side by side by setting the <code>calendars</code> property. This can be useful for selecting ranges or comparing dates across different months.</p>', 3);
+const _hoisted_25 = { class: "docs-example rounded-top p-4" };
+const _hoisted_26 = { class: "d-flex justify-content-center" };
+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>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 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>CCalendar</span> <span class="token attr-name">:calendars</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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>border rounded<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>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="range-selection" tabindex="-1">Range selection <a class="anchor-link" href="#range-selection">#</a></h2><p>Enable range selection to allow users to pick a start and end date. This example shows how to configure the Vue Calendar component to handle date ranges.</p>', 3);
+const _hoisted_30 = { class: "docs-example rounded-top p-4" };
+const _hoisted_31 = { class: "d-flex justify-content-center" };
+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>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 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>CCalendar</span></span>\n<span class="line">    <span class="token attr-name">:calendars</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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>border rounded<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">range</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/23<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/08<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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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-dates" tabindex="-1">Disabled dates <a class="anchor-link" href="#disabled-dates">#</a></h2><p>The Calendar component includes functionality to disable specific dates, such as weekends or holidays, using the <code>disabledDates</code> prop. This prop takes an array and applies custom logic to determine which dates should be disabled.</p>', 3);
+const _hoisted_35 = { class: "docs-example rounded-top p-4" };
+const _hoisted_36 = { class: "d-flex justify-content-center" };
+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>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> 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></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>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 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>CCalendar</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">:calendars</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">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>border rounded<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 attr-name">range</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>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></div><h2 id="non-english-locale" tabindex="-1">Non-english locale <a class="anchor-link" href="#non-english-locale">#</a></h2><p>The CoreUI Vue Calendar allows users to display dates in non-English locales, making it suitable for international applications.</p><h3 id="auto" tabindex="-1">Auto <a class="anchor-link" href="#auto">#</a></h3><p>By default, the Calendar component uses the browser&#39;s default locale. However, you can easily configure it to use a different locale supported by the JavaScript Internationalization API. This feature helps create inclusive and accessible applications for a diverse audience.</p>', 5);
+const _hoisted_42 = { class: "docs-example rounded-top p-4" };
+const _hoisted_43 = { class: "d-flex justify-content-center" };
+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>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 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>CCalendar</span> <span 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 rounded<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span></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><h3 id="chinese" tabindex="-1">Chinese <a class="anchor-link" href="#chinese">#</a></h3><p>Here is an example of the Vue Calendar component with Chinese locale settings.</p>', 3);
+const _hoisted_47 = { class: "docs-example rounded-top p-4" };
+const _hoisted_48 = { class: "d-flex justify-content-center" };
+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-flex 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>CCalendar</span> <span 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 rounded<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 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><h3 id="japanese" tabindex="-1">Japanese <a class="anchor-link" href="#japanese">#</a></h3><p>Below is an example of the Calendar component with Japanese locale settings.</p>', 3);
+const _hoisted_52 = { class: "docs-example rounded-top p-4" };
+const _hoisted_53 = { class: "d-flex justify-content-center" };
+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>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 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>CCalendar</span> <span 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 rounded<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 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><h3 id="korean" tabindex="-1">Korean <a class="anchor-link" href="#korean">#</a></h3><p>Here is an example of the Calendar component with Korean locale settings.</p>', 3);
+const _hoisted_57 = { class: "docs-example rounded-top p-4" };
+const _hoisted_58 = {
+  class: "d-flex justify-content-center",
+  dir: "rtl"
+};
+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 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-center<span class="token punctuation">&quot;</span></span> <span class="token attr-name">dir</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rtl<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCalendar</span> <span 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 rounded<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 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="right-to-left-support" tabindex="-1">Right to left support <a class="anchor-link" href="#right-to-left-support">#</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">#</a></h3><p>Example of the Calendar component with RTL support, using the Hebrew locale.</p>', 5);
+const _hoisted_64 = { class: "docs-example rounded-top p-4" };
+const _hoisted_65 = {
+  class: "d-flex justify-content-center",
+  dir: "rtl"
+};
+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>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 justify-content-center<span class="token punctuation">&quot;</span></span> <span class="token attr-name">dir</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>rtl<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>CCalendar</span> <span 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 rounded<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 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><h3 id="persian" tabindex="-1">Persian <a class="anchor-link" href="#persian">#</a></h3><p>Example of the Vue Calendar component with Persian locale settings.</p>', 3);
+const _hoisted_69 = { class: "docs-example rounded-top p-4" };
+const _hoisted_70 = { class: "d-flex justify-content-center" };
+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>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 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>CCalendar</span> <span 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 rounded<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 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="customizing" tabindex="-1">Customizing <a class="anchor-link" href="#customizing">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</a></h3><p>The Vue Calendar uses local CSS variables on <code>.calendar</code> for real-time customization. Values for these CSS variables are set via Sass, but they can also be overridden directly in the component for dynamic styling.</p>', 4);
+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">#</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>CCalendar <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>CCalendar<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">#</a></h3>', 3);
+const _hoisted_78 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="ccalendar" tabindex="-1">CCalendar <a class="anchor-link" href="#ccalendar">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>aria-nav-next-month-label</strong> <br><div class="badge bg-primary">5.4.0+</div></td><td>A string that provides an accessible label for the button that navigates to the next month in the calendar. This label is read by screen readers to describe the action associated with the button.</td><td>string</td><td>-</td><td>&#39;Next month&#39;</td></tr><tr><td><strong>aria-nav-next-year-label</strong> <br><div class="badge bg-primary">5.4.0+</div></td><td>A string that provides an accessible label for the button that navigates to the next year in the calendar. This label is intended for screen readers to help users understand the button&#39;s functionality.</td><td>string</td><td>-</td><td>&#39;Next year&#39;</td></tr><tr><td><strong>aria-nav-prev-month-label</strong> <br><div class="badge bg-primary">5.4.0+</div></td><td>A string that provides an accessible label for the button that navigates to the previous month in the calendar. Screen readers will use this label to explain the purpose of the button.</td><td>string</td><td>-</td><td>&#39;Previous month&#39;</td></tr><tr><td><strong>aria-nav-prev-year-label</strong> <br><div class="badge bg-primary">5.4.0+</div></td><td>A string that provides an accessible label for the button that navigates to the previous year in the calendar. This label helps screen reader users understand the button&#39;s function.</td><td>string</td><td>-</td><td>&#39;Previous year&#39;</td></tr><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">#</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, $props, $setup, $data, $options) {
+  const _component_CCalendar = resolveComponent("CCalendar");
+  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, [
+        createVNode(_component_CCalendar, {
+          class: "border rounded",
+          locale: "en-US",
+          startDate: "2024/02/13"
+        })
+      ])
+    ]),
+    _hoisted_7,
+    createBaseVNode("div", _hoisted_10, [
+      createBaseVNode("div", _hoisted_11, [
+        createVNode(_component_CCalendar, {
+          class: "border rounded",
+          locale: "en-US",
+          selectionType: "week",
+          showWeekNumber: "",
+          startDate: "2024W15"
+        })
+      ])
+    ]),
+    _hoisted_12,
+    createBaseVNode("div", _hoisted_15, [
+      createBaseVNode("div", _hoisted_16, [
+        createVNode(_component_CCalendar, {
+          class: "border rounded",
+          locale: "en-US",
+          selectionType: "month",
+          startDate: "2024-2"
+        })
+      ])
+    ]),
+    _hoisted_17,
+    createBaseVNode("div", _hoisted_20, [
+      createBaseVNode("div", _hoisted_21, [
+        createVNode(_component_CCalendar, {
+          class: "border rounded",
+          locale: "en-US",
+          selectionType: "year",
+          startDate: "2024"
+        })
+      ])
+    ]),
+    _hoisted_22,
+    createBaseVNode("div", _hoisted_25, [
+      createBaseVNode("div", _hoisted_26, [
+        createVNode(_component_CCalendar, {
+          calendars: 2,
+          class: "border rounded",
+          locale: "en-US"
+        })
+      ])
+    ]),
+    _hoisted_27,
+    createBaseVNode("div", _hoisted_30, [
+      createBaseVNode("div", _hoisted_31, [
+        createVNode(_component_CCalendar, {
+          calendars: 2,
+          class: "border rounded",
+          locale: "en-US",
+          range: "",
+          startDate: "2022/08/23",
+          endDate: "2022/09/08"
+        })
+      ])
+    ]),
+    _hoisted_32,
+    createBaseVNode("div", _hoisted_35, [
+      createBaseVNode("div", _hoisted_36, [
+        createVNode(_component_CCalendar, {
+          calendarDate: $setup.calendarDate,
+          calendars: 2,
+          class: "border rounded",
+          disabledDates: $setup.disabledDates,
+          locale: "en-US",
+          maxDate: $setup.maxDate,
+          minDate: $setup.minDate,
+          range: ""
+        }, null, 8, ["calendarDate", "maxDate", "minDate"])
+      ])
+    ]),
+    _hoisted_37,
+    createBaseVNode("div", _hoisted_42, [
+      createBaseVNode("div", _hoisted_43, [
+        createVNode(_component_CCalendar, { class: "border rounded" })
+      ])
+    ]),
+    _hoisted_44,
+    createBaseVNode("div", _hoisted_47, [
+      createBaseVNode("div", _hoisted_48, [
+        createVNode(_component_CCalendar, {
+          class: "border rounded",
+          locale: "zh-CN"
+        })
+      ])
+    ]),
+    _hoisted_49,
+    createBaseVNode("div", _hoisted_52, [
+      createBaseVNode("div", _hoisted_53, [
+        createVNode(_component_CCalendar, {
+          class: "border rounded",
+          locale: "ja"
+        })
+      ])
+    ]),
+    _hoisted_54,
+    createBaseVNode("div", _hoisted_57, [
+      createBaseVNode("div", _hoisted_58, [
+        createVNode(_component_CCalendar, {
+          class: "border rounded",
+          locale: "ko"
+        })
+      ])
+    ]),
+    _hoisted_59,
+    createBaseVNode("div", _hoisted_64, [
+      createBaseVNode("div", _hoisted_65, [
+        createVNode(_component_CCalendar, {
+          class: "border rounded",
+          locale: "he-IL"
+        })
+      ])
+    ]),
+    _hoisted_66,
+    createBaseVNode("div", _hoisted_69, [
+      createBaseVNode("div", _hoisted_70, [
+        createVNode(_component_CCalendar, {
+          class: "border rounded",
+          locale: "fa-IR"
+        })
+      ])
+    ]),
+    _hoisted_71,
+    createVNode(_component_ScssDocs, {
+      file: "_calendar.scss",
+      capture: "calendar-css-vars"
+    }),
+    _hoisted_75,
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "calendar-variables"
+    }),
+    _hoisted_78
+  ]);
+}
+const calendar_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "calendar.html.vue"]]);
+const data = JSON.parse('{"path":"/components/calendar.html","title":"Vue Calendar Component","lang":"en-US","frontmatter":{"title":"Vue Calendar Component","name":"Calendar","description":"The Vue Calendar Component is a versatile, customizable tool for creating responsive calendars in Vue, supporting day, month, and year selection, and global locales.","pro_component":true,"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/calendar.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":"Multiple calendar panels","slug":"multiple-calendar-panels","link":"#multiple-calendar-panels","children":[]},{"level":2,"title":"Range selection","slug":"range-selection","link":"#range-selection","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":"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":"CCalendar","slug":"ccalendar","link":"#ccalendar","children":[]}]}],"filePathRelative":"components/calendar.md"}');
+export {
+  calendar_html as comp,
+  data
+};
diff --git a/vue/docs/assets/calendar.html-aIZ63-sL.js b/vue/docs/assets/calendar.html-aIZ63-sL.js
deleted file mode 100644
index 583e8d78ae5..00000000000
--- a/vue/docs/assets/calendar.html-aIZ63-sL.js
+++ /dev/null
@@ -1,174 +0,0 @@
-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",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Example "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#example",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_2 = /* @__PURE__ */ createBaseVNode("h3", {
-  id: "days",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Days "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#days",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_3 = { class: "docs-example rounded-top p-4" };
-const _hoisted_4 = { class: "d-flex mb-3" };
-const _hoisted_5 = { class: "d-flex mb-3" };
-const _hoisted_6 = { class: "d-flex mb-3" };
-const _hoisted_7 = /* @__PURE__ */ createBaseVNode("h3", {
-  id: "weeks",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Weeks "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#weeks",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_8 = { class: "docs-example rounded-top p-4" };
-const _hoisted_9 = { class: "d-flex mb-3" };
-const _hoisted_10 = /* @__PURE__ */ createBaseVNode("h3", {
-  id: "months",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Months "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#months",
-    "aria-hidden": "true"
-  }, "#")
-], -1);
-const _hoisted_11 = { class: "docs-example rounded-top p-4" };
-const _hoisted_12 = { class: "d-flex mb-3" };
-const _hoisted_13 = /* @__PURE__ */ createBaseVNode("h3", {
-  id: "years",
-  tabindex: "-1"
-}, [
-  /* @__PURE__ */ createTextVNode("Years "),
-  /* @__PURE__ */ createBaseVNode("a", {
-    class: "anchor-link",
-    href: "#years",
-    "aria-hidden": "true"
-  }, "#")
-], -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-highlighter="prismjs" data-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, [
-    _hoisted_1,
-    _hoisted_2,
-    createBaseVNode("div", _hoisted_3, [
-      createBaseVNode("div", _hoisted_4, [
-        createVNode(_component_CCalendar, {
-          showWeekNumber: "",
-          weekNumbersLabel: "#",
-          class: "border rounded",
-          startDate: "2023-08-20",
-          onStartDateChange: _cache[0] || (_cache[0] = (date) => console.log(date)),
-          onEndDateChange: _cache[1] || (_cache[1] = (date) => console.log(date))
-        })
-      ]),
-      createBaseVNode("div", _hoisted_5, [
-        createVNode(_component_CCalendar, {
-          class: "border rounded",
-          startDate: "2023-08-20",
-          endDate: "2023-10-6",
-          range: "",
-          onStartDateChange: _cache[2] || (_cache[2] = (date) => console.log(date)),
-          onEndDateChange: _cache[3] || (_cache[3] = (date) => console.log(date))
-        })
-      ]),
-      createBaseVNode("div", _hoisted_6, [
-        createVNode(_component_CCalendar, {
-          showWeekNumber: "",
-          weekNumbersLabel: "Y",
-          calendars: 2,
-          class: "border rounded",
-          startDate: "2023-08-20",
-          endDate: "2023-10-6",
-          range: "",
-          onStartDateChange: _cache[4] || (_cache[4] = (date) => console.log(date)),
-          onEndDateChange: _cache[5] || (_cache[5] = (date) => console.log(date))
-        })
-      ])
-    ]),
-    _hoisted_7,
-    createBaseVNode("div", _hoisted_8, [
-      createBaseVNode("div", _hoisted_9, [
-        createVNode(_component_CCalendar, {
-          selectionType: "week",
-          showWeekNumber: "",
-          weekNumbersLabel: "#",
-          class: "border rounded",
-          minDate: "2025W02",
-          maxDate: "2026W06",
-          startDate: "2025W07",
-          endDate: "2025W12",
-          calendars: 2,
-          range: "",
-          onStartDateChange: _cache[6] || (_cache[6] = (date) => console.log(date)),
-          onEndDateChange: _cache[7] || (_cache[7] = (date) => console.log(date))
-        })
-      ])
-    ]),
-    _hoisted_10,
-    createBaseVNode("div", _hoisted_11, [
-      createBaseVNode("div", _hoisted_12, [
-        createVNode(_component_CCalendar, {
-          selectionType: "month",
-          showWeekNumber: "",
-          weekNumbersLabel: "#",
-          class: "border rounded",
-          minDate: "2023-06",
-          maxDate: "2025-06",
-          startDate: "2023-08",
-          endDate: "2024-05",
-          calendars: 2,
-          range: "",
-          onStartDateChange: _cache[8] || (_cache[8] = (date) => console.log(date)),
-          onEndDateChange: _cache[9] || (_cache[9] = (date) => console.log(date))
-        })
-      ])
-    ]),
-    _hoisted_13,
-    createBaseVNode("div", _hoisted_14, [
-      createBaseVNode("div", _hoisted_15, [
-        createVNode(_component_CCalendar, {
-          selectionType: "year",
-          showWeekNumber: "",
-          weekNumbersLabel: "#",
-          class: "border rounded",
-          minDate: "2021",
-          maxDate: "2048",
-          startDate: "2023",
-          endDate: "2036",
-          calendars: 2,
-          range: "",
-          onStartDateChange: _cache[10] || (_cache[10] = (date) => console.log(date)),
-          onEndDateChange: _cache[11] || (_cache[11] = (date) => console.log(date))
-        })
-      ])
-    ]),
-    _hoisted_16
-  ]);
-}
-const calendar_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "calendar.html.vue"]]);
-const data = JSON.parse('{"path":"/components/calendar.html","title":"Vue Calendar Component","lang":"en-US","frontmatter":{"title":"Vue Calendar Component","name":"Calendar","description":"Create consistent cross-browser and cross-device calendar","pro_component":true,"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/calendar.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":"API","slug":"api","link":"#api","children":[{"level":3,"title":"CCalendar","slug":"ccalendar","link":"#ccalendar","children":[]}]}],"filePathRelative":"components/calendar.md"}');
-export {
-  calendar_html as comp,
-  data
-};
diff --git a/vue/docs/assets/callout.html-BHcngsku.js b/vue/docs/assets/callout.html-BvHwLp1x.js
similarity index 78%
rename from vue/docs/assets/callout.html-BHcngsku.js
rename to vue/docs/assets/callout.html-BvHwLp1x.js
index 89fda357b4c..0b7c4f79675 100644
--- a/vue/docs/assets/callout.html-BHcngsku.js
+++ b/vue/docs/assets/callout.html-BvHwLp1x.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "examples",
@@ -7,8 +7,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Examples "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#examples",
-    "aria-hidden": "true"
+    href: "#examples"
   }, "#")
 ], -1);
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
@@ -29,8 +28,7 @@ const _hoisted_7 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Customizing "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#customizing",
-    "aria-hidden": "true"
+    href: "#customizing"
   }, "#")
 ], -1);
 const _hoisted_8 = /* @__PURE__ */ createBaseVNode("h3", {
@@ -40,8 +38,7 @@ const _hoisted_8 = /* @__PURE__ */ createBaseVNode("h3", {
   /* @__PURE__ */ createTextVNode("CSS variables "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#css-variables",
-    "aria-hidden": "true"
+    href: "#css-variables"
   }, "#")
 ], -1);
 const _hoisted_9 = /* @__PURE__ */ createBaseVNode("p", null, [
@@ -49,8 +46,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-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);
+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">#</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">#</a></h3>', 3);
+const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="ccallout" tabindex="-1">CCallout <a class="anchor-link" href="#ccallout">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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-CiiNUsv5.js b/vue/docs/assets/card.html-itUqRb0K.js
similarity index 93%
rename from vue/docs/assets/card.html-CiiNUsv5.js
rename to vue/docs/assets/card.html-itUqRb0K.js
index f33bc44252e..15c8c1d0b73 100644
--- a/vue/docs/assets/card.html-CiiNUsv5.js
+++ b/vue/docs/assets/card.html-itUqRb0K.js
@@ -1,20 +1,20 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, F as Fragment, h as renderList, a as createStaticVNode, f as createTextVNode, t as toDisplayString, n as normalizeClass } from "./app-DGOUrGv-.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_1 = /* @__PURE__ */ createStaticVNode('<h2 id="examples" tabindex="-1">Examples <a class="anchor-link" href="#examples">#</a></h2><h2 id="about" tabindex="-1">About <a class="anchor-link" href="#about">#</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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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" };
@@ -29,28 +29,28 @@ const _hoisted_42 = /* @__PURE__ */ createBaseVNode("blockquote", { class: "bloc
 ], -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-highlighter="prismjs" data-ext="vue" data-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_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">#</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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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">#</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-highlighter="prismjs" data-ext="vue" data-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" };
@@ -63,8 +63,7 @@ const _hoisted_97 = /* @__PURE__ */ createBaseVNode("h3", {
   /* @__PURE__ */ createTextVNode("Border "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#border",
-    "aria-hidden": "true"
+    href: "#border"
   }, "#")
 ], -1);
 const _hoisted_98 = /* @__PURE__ */ createBaseVNode("p", null, [
@@ -83,9 +82,9 @@ 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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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">#</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);
@@ -95,7 +94,7 @@ 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-highlighter="prismjs" data-ext="vue" data-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_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">#</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);
@@ -114,9 +113,9 @@ 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-highlighter="prismjs" data-ext="vue" data-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);
+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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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">#</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">#</a></h3>', 3);
+const _hoisted_149 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="ccard" tabindex="-1">CCard <a class="anchor-link" href="#ccard">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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-DN2cjEdX.js b/vue/docs/assets/carousel.html-B0BciYS9.js
similarity index 86%
rename from vue/docs/assets/carousel.html-DN2cjEdX.js
rename to vue/docs/assets/carousel.html-B0BciYS9.js
index 5cac9f0b54c..e142043e5ab 100644
--- a/vue/docs/assets/carousel.html-DN2cjEdX.js
+++ b/vue/docs/assets/carousel.html-B0BciYS9.js
@@ -1,21 +1,21 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, a as createStaticVNode } from "./app-DGOUrGv-.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_1 = /* @__PURE__ */ createStaticVNode('<h2 id="how-it-works" tabindex="-1">How it works <a class="anchor-link" href="#how-it-works">#</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">#</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">#</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_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">#</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_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">#</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_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">#</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);
@@ -26,18 +26,18 @@ const _hoisted_34 = /* @__PURE__ */ createBaseVNode("p", null, "Some representat
 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_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">#</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_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">#</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);
+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">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables">#</a></h3>', 3);
+const _hoisted_55 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="ccarousel" tabindex="-1">CCarousel <a class="anchor-link" href="#ccarousel">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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");
diff --git a/vue/docs/assets/chart.html-DY5wyS1U.js b/vue/docs/assets/chart.html-CeyziBqZ.js
similarity index 82%
rename from vue/docs/assets/chart.html-DY5wyS1U.js
rename to vue/docs/assets/chart.html-CeyziBqZ.js
index dff90425287..3ca8442bb3d 100644
--- a/vue/docs/assets/chart.html-DY5wyS1U.js
+++ b/vue/docs/assets/chart.html-CeyziBqZ.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, g as ref, i as onMounted, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, w as watch, a as createStaticVNode } from "./app-DGOUrGv-.js";
 var getStyle = function(property, element) {
   if (typeof window === "undefined") {
     return;
@@ -67,23 +67,23 @@ const _sfc_main = {
     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_1 = /* @__PURE__ */ createStaticVNode('<h2 id="installation" tabindex="-1">Installation <a class="anchor-link" href="#installation">#</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">#</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">#</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">#</a></h2><h3 id="line-chart" tabindex="-1">Line Chart <a class="anchor-link" href="#line-chart">#</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_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">#</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_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">#</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_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">#</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_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">#</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_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">#</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_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">#</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);
+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">#</a></h2><h3 id="cchart" tabindex="-1">CChart <a class="anchor-link" href="#cchart">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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, [
diff --git a/vue/docs/assets/checkbox.html-BL-hSbtE.js b/vue/docs/assets/checkbox.html-BPgHXfGt.js
similarity index 64%
rename from vue/docs/assets/checkbox.html-BL-hSbtE.js
rename to vue/docs/assets/checkbox.html-BPgHXfGt.js
index ad56fa89f87..370d5cd7221 100644
--- a/vue/docs/assets/checkbox.html-BL-hSbtE.js
+++ b/vue/docs/assets/checkbox.html-BPgHXfGt.js
@@ -1,12 +1,13 @@
-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";
+import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, t as toDisplayString, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {
-  setup() {
+  __name: "checkbox.html",
+  setup(__props, { expose: __expose }) {
+    __expose();
     const checked = ref(true);
     const checkedNames = ref(["Andrew"]);
-    return {
-      checked,
-      checkedNames
-    };
+    const __returned__ = { checked, checkedNames, ref };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 };
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
@@ -16,8 +17,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Approach "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#approach",
-    "aria-hidden": "true"
+    href: "#approach"
   }, "#")
 ], -1);
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
@@ -32,37 +32,36 @@ const _hoisted_3 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Checks "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#checks",
-    "aria-hidden": "true"
+    href: "#checks"
   }, "#")
 ], -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_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">#</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_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>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 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></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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-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_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>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 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></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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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_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">#</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_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">#</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_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">#</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_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">#</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_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">#</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_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">#</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_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">#</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);
+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">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables">#</a></h3>', 3);
+const _hoisted_51 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cformcheck" tabindex="-1">CFormCheck <a class="anchor-link" href="#cformcheck">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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");
diff --git a/vue/docs/assets/checks-radios.html-kyGivGpt.js b/vue/docs/assets/checks-radios.html-CKmk8NM1.js
similarity index 85%
rename from vue/docs/assets/checks-radios.html-kyGivGpt.js
rename to vue/docs/assets/checks-radios.html-CKmk8NM1.js
index 0b733c3bf6f..9e8835de99a 100644
--- a/vue/docs/assets/checks-radios.html-kyGivGpt.js
+++ b/vue/docs/assets/checks-radios.html-CKmk8NM1.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "approach",
@@ -7,8 +7,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Approach "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#approach",
-    "aria-hidden": "true"
+    href: "#approach"
   }, "#")
 ], -1);
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
@@ -23,44 +22,43 @@ const _hoisted_3 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Checks "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#checks",
-    "aria-hidden": "true"
+    href: "#checks"
   }, "#")
 ], -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><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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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);
+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">#</a></h2><h3 id="cformcheck" tabindex="-1">CFormCheck <a class="anchor-link" href="#cformcheck">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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-BS4-GrP8.js b/vue/docs/assets/close-button.html-blWDZBC3.js
similarity index 63%
rename from vue/docs/assets/close-button.html-BS4-GrP8.js
rename to vue/docs/assets/close-button.html-blWDZBC3.js
index 5f471b31c53..ff03109e88b 100644
--- a/vue/docs/assets/close-button.html-BS4-GrP8.js
+++ b/vue/docs/assets/close-button.html-blWDZBC3.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "example",
@@ -7,8 +7,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Example "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#example",
-    "aria-hidden": "true"
+    href: "#example"
   }, "#")
 ], -1);
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
@@ -19,11 +18,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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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);
+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">#</a></h2><h3 id="cclosebutton" tabindex="-1">CCloseButton <a class="anchor-link" href="#cclosebutton">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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-CXLzPe5v.js b/vue/docs/assets/collapse.html-CXLzPe5v.js
new file mode 100644
index 00000000000..2657db77d37
--- /dev/null
+++ b/vue/docs/assets/collapse.html-CXLzPe5v.js
@@ -0,0 +1,193 @@
+import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, j as withModifiers, a as createStaticVNode, f as createTextVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {
+  __name: "collapse.html",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const visible = ref(false);
+    const visibleHorizontal = ref(false);
+    const visibleA = ref(false);
+    const visibleB = ref(false);
+    const __returned__ = { visible, visibleHorizontal, visibleA, visibleB, ref };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="how-it-works" tabindex="-1">How it works <a class="anchor-link" href="#how-it-works">#</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">#</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>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 class="token keyword">const</span> visible <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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>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 class="token keyword">const</span> visibleHorizontal <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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>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 class="token keyword">const</span> visibleA <span class="token operator">=</span> <span class="token function">ref</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 keyword">const</span> visibleB <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</a></h2><h3 id="ccollapse" tabindex="-1">CCollapse <a class="anchor-link" href="#ccollapse">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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) => $setup.visible = !$setup.visible, ["prevent"]))
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Link")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CButton, {
+        color: "primary",
+        onClick: _cache[1] || (_cache[1] = ($event) => $setup.visible = !$setup.visible)
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Button")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CCollapse, { visible: $setup.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) => $setup.visibleHorizontal = !$setup.visibleHorizontal)
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Button")
+        ]),
+        _: 1
+      }),
+      createBaseVNode("div", _hoisted_10, [
+        createVNode(_component_CCollapse, {
+          horizontal: "",
+          visible: $setup.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) => $setup.visibleA = !$setup.visibleA)
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Toggle first element")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CButton, {
+        color: "primary",
+        onClick: _cache[4] || (_cache[4] = ($event) => $setup.visibleB = !$setup.visibleB)
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Toggle second element")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_CButton, {
+        color: "primary",
+        onClick: _cache[5] || (_cache[5] = () => {
+          $setup.visibleA = !$setup.visibleA;
+          $setup.visibleB = !$setup.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: $setup.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: $setup.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
deleted file mode 100644
index 1908034bf83..00000000000
--- a/vue/docs/assets/collapse.html-CuA1iHpy.js
+++ /dev/null
@@ -1,190 +0,0 @@
-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-c_8p-0J4.js b/vue/docs/assets/columns.html-DRAqgR3h.js
similarity index 92%
rename from vue/docs/assets/columns.html-c_8p-0J4.js
rename to vue/docs/assets/columns.html-DRAqgR3h.js
index c38661be270..7af9a9c510e 100644
--- a/vue/docs/assets/columns.html-c_8p-0J4.js
+++ b/vue/docs/assets/columns.html-DRAqgR3h.js
@@ -1,20 +1,20 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, a as createStaticVNode, f as createTextVNode } from "./app-DGOUrGv-.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_1 = /* @__PURE__ */ createStaticVNode('<h2 id="how-they-work" tabindex="-1">How they work <a class="anchor-link" href="#how-they-work">#</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">#</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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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);
@@ -22,24 +22,24 @@ const _hoisted_28 = /* @__PURE__ */ createStaticVNode('<div class="language-vue
 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-highlighter="prismjs" data-ext="vue" data-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_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">#</a></h2><h3 id="order-props" tabindex="-1">Order props <a class="anchor-link" href="#order-props">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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);
+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">#</a></h2><h3 id="ccol" tabindex="-1">CCol <a class="anchor-link" href="#ccol">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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-DC6_LN_j.js b/vue/docs/assets/containers.html-DgTza5yR.js
similarity index 53%
rename from vue/docs/assets/containers.html-DC6_LN_j.js
rename to vue/docs/assets/containers.html-DgTza5yR.js
index 3187eae7a20..7211b05d0ec 100644
--- a/vue/docs/assets/containers.html-DC6_LN_j.js
+++ b/vue/docs/assets/containers.html-DgTza5yR.js
@@ -1,12 +1,12 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, a as createStaticVNode, f as createTextVNode } from "./app-DGOUrGv-.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_1 = /* @__PURE__ */ createStaticVNode('<h2 id="how-they-work" tabindex="-1">How they work <a class="anchor-link" href="#how-they-work">#</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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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);
+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">#</a></h2><h3 id="ccontainer" tabindex="-1">CContainer <a class="anchor-link" href="#ccontainer">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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-41bLmuls.js b/vue/docs/assets/contents.html-41bLmuls.js
new file mode 100644
index 00000000000..150c79f7758
--- /dev/null
+++ b/vue/docs/assets/contents.html-41bLmuls.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="project-structure" tabindex="-1">Project structure <a class="anchor-link" href="#project-structure">#</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-CKe33LGP.js b/vue/docs/assets/contents.html-CKe33LGP.js
deleted file mode 100644
index 1cd681421c9..00000000000
--- a/vue/docs/assets/contents.html-CKe33LGP.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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/css-variables.html-DBEGBYvO.js b/vue/docs/assets/css-variables.html-DBEGBYvO.js
new file mode 100644
index 00000000000..b649ca64597
--- /dev/null
+++ b/vue/docs/assets/css-variables.html-DBEGBYvO.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.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">#</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">#</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">#</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">#</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">#</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
deleted file mode 100644
index 1c772c630f7..00000000000
--- a/vue/docs/assets/css-variables.html-UJYgUBzW.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-C0-AGXsg.js b/vue/docs/assets/customize.html-C0-AGXsg.js
new file mode 100644
index 00000000000..af084555354
--- /dev/null
+++ b/vue/docs/assets/customize.html-C0-AGXsg.js
@@ -0,0 +1,38 @@
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, f as createTextVNode, d as createVNode, e as withCtx, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="overview" tabindex="-1">Overview <a class="anchor-link" href="#overview">#</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">#</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">#</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-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">#</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, [
+    _hoisted_1,
+    createBaseVNode("p", null, [
+      createTextVNode("You will find the complete list of CoreUI's variables in "),
+      _hoisted_13,
+      createTextVNode(" or in "),
+      _hoisted_14,
+      createTextVNode(". Some variables are set to "),
+      _hoisted_15,
+      createTextVNode(", these variables don't output the property unless they are overridden in your configuration. You can also find a specific component variables list in "),
+      _hoisted_16,
+      createTextVNode(" section ex. "),
+      createVNode(_component_RouteLink, { to: "/components/alert.html#customizing" }, {
+        default: withCtx(() => [
+          createTextVNode("Alerts - Customizing")
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_17
+  ]);
+}
+const customize_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "customize.html.vue"]]);
+const data = JSON.parse('{"path":"/templates/customize.html","title":"Customize vue templates","lang":"en-US","frontmatter":{"title":"Customize vue templates","name":"Customize vue templates","description":"Learn how to theme, customize, and extend CoreUI Vue Templates with Sass, a boatload of global options.","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/templates/customize.html"}]]},"headers":[{"level":2,"title":"Overview","slug":"overview","link":"#overview","children":[]},{"level":2,"title":"File structure","slug":"file-structure","link":"#file-structure","children":[]},{"level":2,"title":"Variable defaults","slug":"variable-defaults","link":"#variable-defaults","children":[]},{"level":2,"title":"Custom styles and overrides","slug":"custom-styles-and-overrides","link":"#custom-styles-and-overrides","children":[]}],"filePathRelative":"templates/customize.md"}');
+export {
+  customize_html as comp,
+  data
+};
diff --git a/vue/docs/assets/customize.html-CNlse-Z8.js b/vue/docs/assets/customize.html-CNlse-Z8.js
deleted file mode 100644
index ec0b807f095..00000000000
--- a/vue/docs/assets/customize.html-CNlse-Z8.js
+++ /dev/null
@@ -1,38 +0,0 @@
-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-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-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, [
-    _hoisted_1,
-    createBaseVNode("p", null, [
-      createTextVNode("You will find the complete list of CoreUI's variables in "),
-      _hoisted_13,
-      createTextVNode(" or in "),
-      _hoisted_14,
-      createTextVNode(". Some variables are set to "),
-      _hoisted_15,
-      createTextVNode(", these variables don't output the property unless they are overridden in your configuration. You can also find a specific component variables list in "),
-      _hoisted_16,
-      createTextVNode(" section ex. "),
-      createVNode(_component_RouteLink, { to: "/components/alert.html#customizing" }, {
-        default: withCtx(() => [
-          createTextVNode("Alerts - Customizing")
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_17
-  ]);
-}
-const customize_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "customize.html.vue"]]);
-const data = JSON.parse('{"path":"/templates/customize.html","title":"Customize vue templates","lang":"en-US","frontmatter":{"title":"Customize vue templates","name":"Customize vue templates","description":"Learn how to theme, customize, and extend CoreUI Vue Templates with Sass, a boatload of global options.","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/templates/customize.html"}]]},"headers":[{"level":2,"title":"Overview","slug":"overview","link":"#overview","children":[]},{"level":2,"title":"File structure","slug":"file-structure","link":"#file-structure","children":[]},{"level":2,"title":"Variable defaults","slug":"variable-defaults","link":"#variable-defaults","children":[]},{"level":2,"title":"Custom styles and overrides","slug":"custom-styles-and-overrides","link":"#custom-styles-and-overrides","children":[]}],"filePathRelative":"templates/customize.md"}');
-export {
-  customize_html as comp,
-  data
-};
diff --git a/vue/docs/assets/date-picker.html-DXrgyOW0.js b/vue/docs/assets/date-picker.html-BHuOUNDP.js
similarity index 64%
rename from vue/docs/assets/date-picker.html-DXrgyOW0.js
rename to vue/docs/assets/date-picker.html-BHuOUNDP.js
index 11e562b87ac..b30b6f9705f 100644
--- a/vue/docs/assets/date-picker.html-DXrgyOW0.js
+++ b/vue/docs/assets/date-picker.html-BHuOUNDP.js
@@ -1,7 +1,9 @@
-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 { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, t as toDisplayString, e as withCtx, a as createStaticVNode, f as createTextVNode } from "./app-DGOUrGv-.js";
 import { f as format, p as parse, e as es } from "./es-DXofg4kJ.js";
 const _sfc_main = {
-  setup() {
+  __name: "date-picker.html",
+  setup(__props, { expose: __expose }) {
+    __expose();
     const vDate = ref(new Date(2022, 2, 1));
     const options = {
       year: "numeric",
@@ -18,102 +20,100 @@ const _sfc_main = {
     ];
     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 __returned__ = { vDate, options, calendarDate, disabledDates, maxDate, minDate, ref, get format() {
+      return format;
+    }, get parse() {
+      return parse;
+    }, get es() {
+      return es;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 };
-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_1 = /* @__PURE__ */ createStaticVNode('<h2 id="about" tabindex="-1">About <a class="anchor-link" href="#about">#</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">#</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">#</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_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">#</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_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>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> 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></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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-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">#</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_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">#</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_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">#</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_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">#</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_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">#</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_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">#</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_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">#</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_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">#</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_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">#</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_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>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 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>\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></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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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">#</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_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">#</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_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">#</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_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">#</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_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">#</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">#</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_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">#</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_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">#</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);
@@ -123,14 +123,14 @@ 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_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">#</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);
+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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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">#</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">#</a></h3>', 3);
+const _hoisted_145 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cdatepicker" tabindex="-1">CDatePicker <a class="anchor-link" href="#cdatepicker">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>aria-nav-next-month-label</strong> <br><div class="badge bg-primary">5.4.0+</div></td><td>A string that provides an accessible label for the button that navigates to the next month in the calendar. This label is read by screen readers to describe the action associated with the button.</td><td>string</td><td>-</td><td>&#39;Next month&#39;</td></tr><tr><td><strong>aria-nav-next-year-label</strong> <br><div class="badge bg-primary">5.4.0+</div></td><td>A string that provides an accessible label for the button that navigates to the next year in the calendar. This label is intended for screen readers to help users understand the button&#39;s functionality.</td><td>string</td><td>-</td><td>&#39;Next year&#39;</td></tr><tr><td><strong>aria-nav-prev-month-label</strong> <br><div class="badge bg-primary">5.4.0+</div></td><td>A string that provides an accessible label for the button that navigates to the previous month in the calendar. Screen readers will use this label to explain the purpose of the button.</td><td>string</td><td>-</td><td>&#39;Previous month&#39;</td></tr><tr><td><strong>aria-nav-prev-year-label</strong> <br><div class="badge bg-primary">5.4.0+</div></td><td>A string that provides an accessible label for the button that navigates to the previous year in the calendar. This label helps screen reader users understand the button&#39;s function.</td><td>string</td><td>-</td><td>&#39;Previous year&#39;</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>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">#</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");
@@ -317,7 +317,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             locale: "en-US",
             maxDate: $setup.maxDate,
             minDate: $setup.minDate
-          }, null, 8, ["calendarDate", "disabledDates", "maxDate", "minDate"])
+          }, null, 8, ["calendarDate", "maxDate", "minDate"])
         ])
       ])
     ]),
diff --git a/vue/docs/assets/date-range-picker.html-T7otEH2H.js b/vue/docs/assets/date-range-picker.html-Bs7ll3rY.js
similarity index 59%
rename from vue/docs/assets/date-range-picker.html-T7otEH2H.js
rename to vue/docs/assets/date-range-picker.html-Bs7ll3rY.js
index fdd97240ffd..3ca70bcbf5c 100644
--- a/vue/docs/assets/date-range-picker.html-T7otEH2H.js
+++ b/vue/docs/assets/date-range-picker.html-Bs7ll3rY.js
@@ -1,7 +1,9 @@
-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 { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, t as toDisplayString, e as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 import { f as format, p as parse, e as es } from "./es-DXofg4kJ.js";
 const _sfc_main = {
-  setup() {
+  __name: "date-range-picker.html",
+  setup(__props, { expose: __expose }) {
+    __expose();
     const vStartDate = ref(new Date(2022, 2, 1));
     const vEndDate = ref(new Date(2022, 2, 7));
     const options = {
@@ -42,19 +44,15 @@ const _sfc_main = {
         new Date((/* @__PURE__ */ new Date()).getFullYear(), (/* @__PURE__ */ new Date()).getMonth(), 0)
       ]
     };
-    return {
-      format,
-      parse,
-      es,
-      vStartDate,
-      vEndDate,
-      options,
-      calendarDate,
-      disabledDates,
-      maxDate,
-      minDate,
-      customRanges
-    };
+    const __returned__ = { vStartDate, vEndDate, options, calendarDate, disabledDates, maxDate, minDate, customRanges, ref, get format() {
+      return format;
+    }, get parse() {
+      return parse;
+    }, get es() {
+      return es;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 };
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
@@ -64,8 +62,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Example "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#example",
-    "aria-hidden": "true"
+    href: "#example"
   }, "#")
 ], -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);
@@ -76,8 +73,7 @@ const _hoisted_3 = /* @__PURE__ */ createBaseVNode("h3", {
   /* @__PURE__ */ createTextVNode("Days "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#days",
-    "aria-hidden": "true"
+    href: "#days"
   }, "#")
 ], -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);
@@ -85,88 +81,88 @@ 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_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">#</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_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>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> 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></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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-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">#</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_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">#</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_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">#</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_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">#</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_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">#</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_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">#</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_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">#</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_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">#</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_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">#</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_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>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> 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></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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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_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>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> 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></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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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">#</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_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">#</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_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">#</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_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">#</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_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">#</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">#</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_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">#</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_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">#</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);
@@ -176,14 +172,14 @@ 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_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">#</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);
+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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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">#</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">#</a></h3>', 3);
+const _hoisted_146 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cdaterangepicker" tabindex="-1">CDateRangePicker <a class="anchor-link" href="#cdaterangepicker">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><thead><tr><th>Prop name</th><th>Description</th><th>Type</th><th>Values</th><th>Default</th></tr></thead><tbody><tr><td><strong>aria-nav-next-month-label</strong> <br><div class="badge bg-primary">5.4.0+</div></td><td>A string that provides an accessible label for the button that navigates to the next month in the calendar. This label is read by screen readers to describe the action associated with the button.</td><td>string</td><td>-</td><td>&#39;Next month&#39;</td></tr><tr><td><strong>aria-nav-next-year-label</strong> <br><div class="badge bg-primary">5.4.0+</div></td><td>A string that provides an accessible label for the button that navigates to the next year in the calendar. This label is intended for screen readers to help users understand the button&#39;s functionality.</td><td>string</td><td>-</td><td>&#39;Next year&#39;</td></tr><tr><td><strong>aria-nav-prev-month-label</strong> <br><div class="badge bg-primary">5.4.0+</div></td><td>A string that provides an accessible label for the button that navigates to the previous month in the calendar. Screen readers will use this label to explain the purpose of the button.</td><td>string</td><td>-</td><td>&#39;Previous month&#39;</td></tr><tr><td><strong>aria-nav-prev-year-label</strong> <br><div class="badge bg-primary">5.4.0+</div></td><td>A string that provides an accessible label for the button that navigates to the previous year in the calendar. This label helps screen reader users understand the button&#39;s function.</td><td>string</td><td>-</td><td>&#39;Previous year&#39;</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>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">#</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");
@@ -381,7 +377,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             locale: "en-US",
             maxDate: $setup.maxDate,
             minDate: $setup.minDate
-          }, null, 8, ["calendarDate", "disabledDates", "maxDate", "minDate"])
+          }, null, 8, ["calendarDate", "maxDate", "minDate"])
         ])
       ])
     ]),
@@ -389,7 +385,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     createBaseVNode("div", _hoisted_79, [
       createBaseVNode("div", _hoisted_80, [
         createBaseVNode("div", _hoisted_81, [
-          createVNode(_component_CDateRangePicker, { ranges: $setup.customRanges }, null, 8, ["ranges"])
+          createVNode(_component_CDateRangePicker, { ranges: $setup.customRanges })
         ])
       ])
     ]),
diff --git a/vue/docs/assets/download.html-91eC3PyH.js b/vue/docs/assets/download.html-91eC3PyH.js
deleted file mode 100644
index b646d93c48b..00000000000
--- a/vue/docs/assets/download.html-91eC3PyH.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_15);
-}
-const download_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "download.html.vue"]]);
-const data = JSON.parse('{"path":"/templates/download.html","title":"Download vue templates","lang":"en-US","frontmatter":{"title":"Download vue templates","name":"Download vue templates","description":"Download CoreUI Vue Admin Templates to get the source code that lets you customize and create your vue-based application.","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/templates/download.html"}]]},"headers":[{"level":2,"title":"Source files","slug":"source-files","link":"#source-files","children":[{"level":3,"title":"PRO Templates","slug":"pro-templates","link":"#pro-templates","children":[]},{"level":3,"title":"Clone repo","slug":"clone-repo","link":"#clone-repo","children":[]}]}],"filePathRelative":"templates/download.md"}');
-export {
-  download_html as comp,
-  data
-};
diff --git a/vue/docs/assets/download.html-B0ATzToD.js b/vue/docs/assets/download.html-B0ATzToD.js
new file mode 100644
index 00000000000..cfa6cc3c660
--- /dev/null
+++ b/vue/docs/assets/download.html-B0ATzToD.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="source-files" tabindex="-1">Source files <a class="anchor-link" href="#source-files">#</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">#</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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_15);
+}
+const download_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "download.html.vue"]]);
+const data = JSON.parse('{"path":"/templates/download.html","title":"Download vue templates","lang":"en-US","frontmatter":{"title":"Download vue templates","name":"Download vue templates","description":"Download CoreUI Vue Admin Templates to get the source code that lets you customize and create your vue-based application.","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/templates/download.html"}]]},"headers":[{"level":2,"title":"Source files","slug":"source-files","link":"#source-files","children":[{"level":3,"title":"PRO Templates","slug":"pro-templates","link":"#pro-templates","children":[]},{"level":3,"title":"Clone repo","slug":"clone-repo","link":"#clone-repo","children":[]}]}],"filePathRelative":"templates/download.md"}');
+export {
+  download_html as comp,
+  data
+};
diff --git a/vue/docs/assets/dropdown.html-D58fBbQW.js b/vue/docs/assets/dropdown.html-C4NgwOey.js
similarity index 88%
rename from vue/docs/assets/dropdown.html-D58fBbQW.js
rename to vue/docs/assets/dropdown.html-C4NgwOey.js
index dd552d37cc5..0dd619f86e5 100644
--- a/vue/docs/assets/dropdown.html-D58fBbQW.js
+++ b/vue/docs/assets/dropdown.html-C4NgwOey.js
@@ -1,22 +1,22 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, F as Fragment, h as renderList, a as createStaticVNode, f as createTextVNode, t as toDisplayString } from "./app-DGOUrGv-.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_1 = /* @__PURE__ */ createStaticVNode('<h2 id="overview" tabindex="-1">Overview <a class="anchor-link" href="#overview">#</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">#</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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</a></h2>', 2);
 const _hoisted_35 = /* @__PURE__ */ createBaseVNode("h3", {
   id: "centered",
   tabindex: "-1"
@@ -24,8 +24,7 @@ const _hoisted_35 = /* @__PURE__ */ createBaseVNode("h3", {
   /* @__PURE__ */ createTextVNode("Centered "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#centered",
-    "aria-hidden": "true"
+    href: "#centered"
   }, "#")
 ], -1);
 const _hoisted_36 = /* @__PURE__ */ createBaseVNode("p", null, [
@@ -36,40 +35,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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</a></h2><h3 id="headers" tabindex="-1">Headers <a class="anchor-link" href="#headers">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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-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_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">#</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">#</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-highlighter="prismjs" data-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);
+const _hoisted_97 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cdropdown" tabindex="-1">CDropdown <a class="anchor-link" href="#cdropdown">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">5.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">5.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">#</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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">5.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/floating-labels.html-OoHunpjU.js b/vue/docs/assets/floating-labels.html-CCkOOAc0.js
similarity index 96%
rename from vue/docs/assets/floating-labels.html-OoHunpjU.js
rename to vue/docs/assets/floating-labels.html-CCkOOAc0.js
index 7e1acb3c507..e4520fa026b 100644
--- a/vue/docs/assets/floating-labels.html-OoHunpjU.js
+++ b/vue/docs/assets/floating-labels.html-CCkOOAc0.js
@@ -1,28 +1,28 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, a as createStaticVNode } from "./app-DGOUrGv-.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_1 = /* @__PURE__ */ createStaticVNode('<h2 id="example" tabindex="-1">Example <a class="anchor-link" href="#example">#</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_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">#</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_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">#</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_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">#</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);
+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">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables">#</a></h3>', 3);
 function _sfc_render(_ctx, _cache) {
   const _component_CFormInput = resolveComponent("CFormInput");
   const _component_CFormFloating = resolveComponent("CFormFloating");
diff --git a/vue/docs/assets/footer.html-DN3ns744.js b/vue/docs/assets/footer.html-CSFrT_Wq.js
similarity index 63%
rename from vue/docs/assets/footer.html-DN3ns744.js
rename to vue/docs/assets/footer.html-CSFrT_Wq.js
index 8f9567055cf..af43139994b 100644
--- a/vue/docs/assets/footer.html-DN3ns744.js
+++ b/vue/docs/assets/footer.html-CSFrT_Wq.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "examples",
@@ -7,16 +7,15 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Examples "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#examples",
-    "aria-hidden": "true"
+    href: "#examples"
   }, "#")
 ], -1);
 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-highlighter="prismjs" data-ext="vue" data-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);
+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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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">#</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">#</a></h3>', 3);
+const _hoisted_12 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cfooter" tabindex="-1">CFooter <a class="anchor-link" href="#cfooter">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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-Dq3LSWS5.js b/vue/docs/assets/form-control.html-CxCiB4bb.js
similarity index 85%
rename from vue/docs/assets/form-control.html-Dq3LSWS5.js
rename to vue/docs/assets/form-control.html-CxCiB4bb.js
index 43add5b8098..40b6ab89e38 100644
--- a/vue/docs/assets/form-control.html-Dq3LSWS5.js
+++ b/vue/docs/assets/form-control.html-CxCiB4bb.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "example",
@@ -7,24 +7,23 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Example "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#example",
-    "aria-hidden": "true"
+    href: "#example"
   }, "#")
 ], -1);
 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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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_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">#</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_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">#</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" };
@@ -33,15 +32,15 @@ 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_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">#</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>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_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">#</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>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);
+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">#</a></h2><h3 id="cforminput" tabindex="-1">CFormInput <a class="anchor-link" href="#cforminput">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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-D9aeBmOt.js b/vue/docs/assets/grid.html-t8D6bS23.js
similarity index 82%
rename from vue/docs/assets/grid.html-D9aeBmOt.js
rename to vue/docs/assets/grid.html-t8D6bS23.js
index cf6e60f89b5..b7cc99bcffe 100644
--- a/vue/docs/assets/grid.html-D9aeBmOt.js
+++ b/vue/docs/assets/grid.html-t8D6bS23.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "example",
@@ -7,8 +7,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Example "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#example",
-    "aria-hidden": "true"
+    href: "#example"
   }, "#")
 ], -1);
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
@@ -22,26 +21,26 @@ 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-highlighter="prismjs" data-ext="vue" data-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_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">#</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">#</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">#</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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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);
@@ -59,7 +58,7 @@ const _hoisted_67 = { class: "docs-example-row" };
 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-highlighter="prismjs" data-ext="vue" data-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);
+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">#</a></h2><h3 id="ccontainer" tabindex="-1">CContainer <a class="anchor-link" href="#ccontainer">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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-BqQUwcbR.js b/vue/docs/assets/gutters.html-SyYvHCgl.js
similarity index 80%
rename from vue/docs/assets/gutters.html-BqQUwcbR.js
rename to vue/docs/assets/gutters.html-SyYvHCgl.js
index 7c0faddf07f..0fa391290ed 100644
--- a/vue/docs/assets/gutters.html-BqQUwcbR.js
+++ b/vue/docs/assets/gutters.html-SyYvHCgl.js
@@ -1,6 +1,6 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, a as createStaticVNode, f as createTextVNode } from "./app-DGOUrGv-.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_1 = /* @__PURE__ */ createStaticVNode('<h2 id="how-they-work" tabindex="-1">How they work <a class="anchor-link" href="#how-they-work">#</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">#</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);
@@ -8,19 +8,19 @@ const _hoisted_8 = /* @__PURE__ */ createStaticVNode('<div class="language-vue l
 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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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);
+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">#</a></h2><h3 id="ccontainer" tabindex="-1">CContainer <a class="anchor-link" href="#ccontainer">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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-B_Q5U0MU.js b/vue/docs/assets/header.html-B_Q5U0MU.js
new file mode 100644
index 00000000000..079f8cd0985
--- /dev/null
+++ b/vue/docs/assets/header.html-B_Q5U0MU.js
@@ -0,0 +1,183 @@
+import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, a as createStaticVNode, f as createTextVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {
+  __name: "header.html",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const visible = ref(true);
+    const __returned__ = { visible, ref };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="example" tabindex="-1">Example <a class="anchor-link" href="#example">#</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">#</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-highlighter="prismjs" data-ext="vue" data-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 class="token keyword">const</span> visible <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></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>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 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>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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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">#</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">#</a></h3>', 3);
+const _hoisted_16 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cheader" tabindex="-1">CHeader <a class="anchor-link" href="#cheader">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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>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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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");
+  const _component_CNavLink = resolveComponent("CNavLink");
+  const _component_CNavItem = resolveComponent("CNavItem");
+  const _component_CDropdownToggle = resolveComponent("CDropdownToggle");
+  const _component_CDropdownItem = resolveComponent("CDropdownItem");
+  const _component_CDropdownDivider = resolveComponent("CDropdownDivider");
+  const _component_CDropdownMenu = resolveComponent("CDropdownMenu");
+  const _component_CDropdown = resolveComponent("CDropdown");
+  const _component_CHeaderNav = resolveComponent("CHeaderNav");
+  const _component_CFormInput = resolveComponent("CFormInput");
+  const _component_CButton = resolveComponent("CButton");
+  const _component_CForm = resolveComponent("CForm");
+  const _component_CCollapse = resolveComponent("CCollapse");
+  const _component_CContainer = resolveComponent("CContainer");
+  const _component_CHeader = resolveComponent("CHeader");
+  const _component_ScssDocs = resolveComponent("ScssDocs");
+  return openBlock(), createElementBlock("div", null, [
+    _hoisted_1,
+    createBaseVNode("div", _hoisted_8, [
+      createVNode(_component_CHeader, null, {
+        default: withCtx(() => [
+          createVNode(_component_CContainer, { fluid: "" }, {
+            default: withCtx(() => [
+              createVNode(_component_CHeaderBrand, { href: "#" }, {
+                default: withCtx(() => [
+                  createTextVNode("Header")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CHeaderToggler, {
+                onClick: _cache[0] || (_cache[0] = ($event) => $setup.visible = !$setup.visible)
+              }),
+              createVNode(_component_CCollapse, {
+                class: "header-collapse",
+                visible: $setup.visible
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_CHeaderNav, null, {
+                    default: withCtx(() => [
+                      createVNode(_component_CNavItem, null, {
+                        default: withCtx(() => [
+                          createVNode(_component_CNavLink, {
+                            href: "#",
+                            active: ""
+                          }, {
+                            default: withCtx(() => [
+                              createTextVNode(" Home ")
+                            ]),
+                            _: 1
+                          })
+                        ]),
+                        _: 1
+                      }),
+                      createVNode(_component_CNavItem, null, {
+                        default: withCtx(() => [
+                          createVNode(_component_CNavLink, { href: "#" }, {
+                            default: withCtx(() => [
+                              createTextVNode("Link")
+                            ]),
+                            _: 1
+                          })
+                        ]),
+                        _: 1
+                      }),
+                      createVNode(_component_CDropdown, { variant: "nav-item" }, {
+                        default: withCtx(() => [
+                          createVNode(_component_CDropdownToggle, { color: "secondary" }, {
+                            default: withCtx(() => [
+                              createTextVNode("Dropdown button")
+                            ]),
+                            _: 1
+                          }),
+                          createVNode(_component_CDropdownMenu, null, {
+                            default: withCtx(() => [
+                              createVNode(_component_CDropdownItem, { href: "#" }, {
+                                default: withCtx(() => [
+                                  createTextVNode("Action")
+                                ]),
+                                _: 1
+                              }),
+                              createVNode(_component_CDropdownItem, { href: "#" }, {
+                                default: withCtx(() => [
+                                  createTextVNode("Another action")
+                                ]),
+                                _: 1
+                              }),
+                              createVNode(_component_CDropdownDivider),
+                              createVNode(_component_CDropdownItem, { href: "#" }, {
+                                default: withCtx(() => [
+                                  createTextVNode("Something else here")
+                                ]),
+                                _: 1
+                              })
+                            ]),
+                            _: 1
+                          })
+                        ]),
+                        _: 1
+                      }),
+                      createVNode(_component_CNavItem, null, {
+                        default: withCtx(() => [
+                          createVNode(_component_CNavLink, {
+                            href: "#",
+                            disabled: ""
+                          }, {
+                            default: withCtx(() => [
+                              createTextVNode(" Disabled ")
+                            ]),
+                            _: 1
+                          })
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(_component_CForm, { class: "d-flex" }, {
+                    default: withCtx(() => [
+                      createVNode(_component_CFormInput, {
+                        class: "me-2",
+                        type: "search",
+                        placeholder: "Search"
+                      }),
+                      createVNode(_component_CButton, {
+                        type: "submit",
+                        color: "success",
+                        variant: "outline"
+                      }, {
+                        default: withCtx(() => [
+                          createTextVNode("Search")
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }, 8, ["visible"])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_9,
+    createVNode(_component_ScssDocs, {
+      file: "_header.scss",
+      capture: "header-css-vars"
+    }),
+    _hoisted_13,
+    createVNode(_component_ScssDocs, {
+      file: "_variables.scss",
+      capture: "header-variables"
+    }),
+    _hoisted_16
+  ]);
+}
+const header_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "header.html.vue"]]);
+const data = JSON.parse('{"path":"/components/header.html","title":"Vue Header Component","lang":"en-US","frontmatter":{"title":"Vue Header Component","name":"Header","description":"Documentation and examples for the Header powerful, responsive navigation header. Includes support for branding, links, dropdowns, and more.","other_frameworks":"header","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/header.html"}]]},"headers":[{"level":2,"title":"Example","slug":"example","link":"#example","children":[]},{"level":2,"title":"Supported content","slug":"supported-content","link":"#supported-content","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":"CHeader","slug":"cheader","link":"#cheader","children":[]},{"level":3,"title":"CHeaderBrand","slug":"cheaderbrand","link":"#cheaderbrand","children":[]},{"level":3,"title":"CHeaderNav","slug":"cheadernav","link":"#cheadernav","children":[]}]}],"filePathRelative":"components/header.md"}');
+export {
+  header_html as comp,
+  data
+};
diff --git a/vue/docs/assets/header.html-DBfVFFNJ.js b/vue/docs/assets/header.html-DBfVFFNJ.js
deleted file mode 100644
index 03c5dc37976..00000000000
--- a/vue/docs/assets/header.html-DBfVFFNJ.js
+++ /dev/null
@@ -1,180 +0,0 @@
-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 {
-      visible: true
-    };
-  }
-};
-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-highlighter="prismjs" data-ext="vue" data-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");
-  const _component_CNavLink = resolveComponent("CNavLink");
-  const _component_CNavItem = resolveComponent("CNavItem");
-  const _component_CDropdownToggle = resolveComponent("CDropdownToggle");
-  const _component_CDropdownItem = resolveComponent("CDropdownItem");
-  const _component_CDropdownDivider = resolveComponent("CDropdownDivider");
-  const _component_CDropdownMenu = resolveComponent("CDropdownMenu");
-  const _component_CDropdown = resolveComponent("CDropdown");
-  const _component_CHeaderNav = resolveComponent("CHeaderNav");
-  const _component_CFormInput = resolveComponent("CFormInput");
-  const _component_CButton = resolveComponent("CButton");
-  const _component_CForm = resolveComponent("CForm");
-  const _component_CCollapse = resolveComponent("CCollapse");
-  const _component_CContainer = resolveComponent("CContainer");
-  const _component_CHeader = resolveComponent("CHeader");
-  const _component_ScssDocs = resolveComponent("ScssDocs");
-  return openBlock(), createElementBlock("div", null, [
-    _hoisted_1,
-    createBaseVNode("div", _hoisted_8, [
-      createVNode(_component_CHeader, null, {
-        default: withCtx(() => [
-          createVNode(_component_CContainer, { fluid: "" }, {
-            default: withCtx(() => [
-              createVNode(_component_CHeaderBrand, { href: "#" }, {
-                default: withCtx(() => [
-                  createTextVNode("Header")
-                ]),
-                _: 1
-              }),
-              createVNode(_component_CHeaderToggler, {
-                onClick: _cache[0] || (_cache[0] = ($event) => $data.visible = !$data.visible)
-              }),
-              createVNode(_component_CCollapse, {
-                class: "header-collapse",
-                visible: $data.visible
-              }, {
-                default: withCtx(() => [
-                  createVNode(_component_CHeaderNav, null, {
-                    default: withCtx(() => [
-                      createVNode(_component_CNavItem, null, {
-                        default: withCtx(() => [
-                          createVNode(_component_CNavLink, {
-                            href: "#",
-                            active: ""
-                          }, {
-                            default: withCtx(() => [
-                              createTextVNode(" Home ")
-                            ]),
-                            _: 1
-                          })
-                        ]),
-                        _: 1
-                      }),
-                      createVNode(_component_CNavItem, null, {
-                        default: withCtx(() => [
-                          createVNode(_component_CNavLink, { href: "#" }, {
-                            default: withCtx(() => [
-                              createTextVNode("Link")
-                            ]),
-                            _: 1
-                          })
-                        ]),
-                        _: 1
-                      }),
-                      createVNode(_component_CDropdown, { variant: "nav-item" }, {
-                        default: withCtx(() => [
-                          createVNode(_component_CDropdownToggle, { color: "secondary" }, {
-                            default: withCtx(() => [
-                              createTextVNode("Dropdown button")
-                            ]),
-                            _: 1
-                          }),
-                          createVNode(_component_CDropdownMenu, null, {
-                            default: withCtx(() => [
-                              createVNode(_component_CDropdownItem, { href: "#" }, {
-                                default: withCtx(() => [
-                                  createTextVNode("Action")
-                                ]),
-                                _: 1
-                              }),
-                              createVNode(_component_CDropdownItem, { href: "#" }, {
-                                default: withCtx(() => [
-                                  createTextVNode("Another action")
-                                ]),
-                                _: 1
-                              }),
-                              createVNode(_component_CDropdownDivider),
-                              createVNode(_component_CDropdownItem, { href: "#" }, {
-                                default: withCtx(() => [
-                                  createTextVNode("Something else here")
-                                ]),
-                                _: 1
-                              })
-                            ]),
-                            _: 1
-                          })
-                        ]),
-                        _: 1
-                      }),
-                      createVNode(_component_CNavItem, null, {
-                        default: withCtx(() => [
-                          createVNode(_component_CNavLink, {
-                            href: "#",
-                            disabled: ""
-                          }, {
-                            default: withCtx(() => [
-                              createTextVNode(" Disabled ")
-                            ]),
-                            _: 1
-                          })
-                        ]),
-                        _: 1
-                      })
-                    ]),
-                    _: 1
-                  }),
-                  createVNode(_component_CForm, { class: "d-flex" }, {
-                    default: withCtx(() => [
-                      createVNode(_component_CFormInput, {
-                        class: "me-2",
-                        type: "search",
-                        placeholder: "Search"
-                      }),
-                      createVNode(_component_CButton, {
-                        type: "submit",
-                        color: "success",
-                        variant: "outline"
-                      }, {
-                        default: withCtx(() => [
-                          createTextVNode("Search")
-                        ]),
-                        _: 1
-                      })
-                    ]),
-                    _: 1
-                  })
-                ]),
-                _: 1
-              }, 8, ["visible"])
-            ]),
-            _: 1
-          })
-        ]),
-        _: 1
-      })
-    ]),
-    _hoisted_9,
-    createVNode(_component_ScssDocs, {
-      file: "_header.scss",
-      capture: "header-css-vars"
-    }),
-    _hoisted_13,
-    createVNode(_component_ScssDocs, {
-      file: "_variables.scss",
-      capture: "header-variables"
-    }),
-    _hoisted_16
-  ]);
-}
-const header_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "header.html.vue"]]);
-const data = JSON.parse('{"path":"/components/header.html","title":"Vue Header Component","lang":"en-US","frontmatter":{"title":"Vue Header Component","name":"Header","description":"Documentation and examples for the Header powerful, responsive navigation header. Includes support for branding, links, dropdowns, and more.","other_frameworks":"header","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/components/header.html"}]]},"headers":[{"level":2,"title":"Example","slug":"example","link":"#example","children":[]},{"level":2,"title":"Supported content","slug":"supported-content","link":"#supported-content","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":"CHeader","slug":"cheader","link":"#cheader","children":[]},{"level":3,"title":"CHeaderBrand","slug":"cheaderbrand","link":"#cheaderbrand","children":[]},{"level":3,"title":"CHeaderNav","slug":"cheadernav","link":"#cheadernav","children":[]}]}],"filePathRelative":"components/header.md"}');
-export {
-  header_html as comp,
-  data
-};
diff --git a/vue/docs/assets/icon.html-C2C1fAVP.js b/vue/docs/assets/icon.html-ivU2m4Fv.js
similarity index 99%
rename from vue/docs/assets/icon.html-C2C1fAVP.js
rename to vue/docs/assets/icon.html-ivU2m4Fv.js
index cb2ec6b9b9f..aa73169599f 100644
--- a/vue/docs/assets/icon.html-C2C1fAVP.js
+++ b/vue/docs/assets/icon.html-ivU2m4Fv.js
@@ -1,4 +1,4 @@
-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 { k as cibCoreuiC, l as cibDiscourse, m as cibFacebook, p as cibGithub, q as cibOpenCollective, u as cibTwitter, v as cilArrowBottom, x as cilArrowRight, y as cilArrowTop, z as cilBasket, A as cilBurn, B as cilCheckCircle, C as cilCloudDownload, D as cilContrast, E as cilFilterX, G as cilHandshake, H as cilInfo, I as cilLayers, J as cilMenu, K as cilMoon, L as cilOptions, M as cilPeople, N as cilPuzzle, O as cilSettings, P as cilSpeedometer, Q as cilSun, R as cilSwapVertical, S as cilUserFollow, T as cilWarning, _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, U as CIcon, a as createStaticVNode, f as createTextVNode, V as createBlock, F as Fragment, h as renderList, t as toDisplayString, W as createCommentVNode } from "./app-DGOUrGv-.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'/>"];
@@ -4728,32 +4728,31 @@ const icon = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty
   freeSet: index
 }, Symbol.toStringTag, { value: "Module" }));
 const _sfc_main = {
-  components: {
-    CIcon
-  },
-  setup() {
+  __name: "icon.html",
+  setup(__props, { expose: __expose }) {
+    __expose();
     const linearIcons = ["cilAccountLogout", "cilActionRedo", "cilActionUndo", "cilAddressBook", "cilAirplaneModeOff", "cilAirplaneMode", "cilAirplay", "cilAlarm", "cilAlbum", "cilAlignCenter", "cilAlignLeft", "cilAlignRight", "cilAmericanFootball", "cilAnimal", "cilAperture", "cilApple", "cilApplicationsSettings", "cilApplications", "cilAppsSettings", "cilApps", "cilArrowBottom", "cilArrowCircleBottom", "cilArrowCircleLeft", "cilArrowCircleRight", "cilArrowCircleTop", "cilArrowLeft", "cilArrowRight", "cilArrowThickBottom", "cilArrowThickFromBottom", "cilArrowThickFromLeft", "cilArrowThickFromRight", "cilArrowThickFromTop", "cilArrowThickLeft", "cilArrowThickRight", "cilArrowThickToBottom", "cilArrowThickToLeft", "cilArrowThickToRight", "cilArrowThickToTop", "cilArrowThickTop", "cilArrowTop", "cilAssistiveListeningSystem", "cilAsteriskCircle", "cilAsterisk", "cilAt", "cilAudioDescription", "cilAudioSpectrum", "cilAudio", "cilAvTimer", "cilBabyCarriage", "cilBaby", "cilBackspace", "cilBadge", "cilBalanceScale", "cilBan", "cilBank", "cilBarChart", "cilBarcode", "cilBaseball", "cilBasket", "cilBasketball", "cilBath", "cilBathroom", "cilBattery0", "cilBattery3", "cilBattery5", "cilBatteryAlert", "cilBatteryEmpty", "cilBatteryFull", "cilBatterySlash", "cilBeachAccess", "cilBeaker", "cilBed", "cilBellExclamation", "cilBell", "cilBike", "cilBirthdayCake", "cilBlind", "cilBluetooth", "cilBlurCircular", "cilBlurLinear", "cilBlur", "cilBoatAlt", "cilBold", "cilBoltCircle", "cilBolt", "cilBook", "cilBookmark", "cilBorderAll", "cilBorderBottom", "cilBorderClear", "cilBorderHorizontal", "cilBorderInner", "cilBorderLeft", "cilBorderOuter", "cilBorderRight", "cilBorderStyle", "cilBorderTop", "cilBorderVertical", "cilBowling", "cilBraille", "cilBriefcase", "cilBrightness", "cilBritishPound", "cilBrowser", "cilBrushAlt", "cilBrush", "cilBug", "cilBuilding", "cilBullhorn", "cilBurger", "cilBurn", "cilBusAlt", "cilCalculator", "cilCalendarCheck", "cilCalendar", "cilCameraControl", "cilCameraRoll", "cilCamera", "cilCarAlt", "cilCaretBottom", "cilCaretLeft", "cilCaretRight", "cilCaretTop", "cilCart", "cilCash", "cilCasino", "cilCast", "cilCat", "cilCc", "cilCenterFocus", "cilChartLine", "cilChartPie", "cilChart", "cilChatBubble", "cilCheckAlt", "cilCheckCircle", "cilCheck", "cilChevronBottom", "cilChevronCircleDownAlt", "cilChevronCircleLeftAlt", "cilChevronCircleRightAlt", "cilChevronCircleUpAlt", "cilChevronDoubleDown", "cilChevronDoubleLeft", "cilChevronDoubleRight", "cilChevronDoubleUp", "cilChevronLeft", "cilChevronRight", "cilChevronTop", "cilChildFriendly", "cilChild", "cilCircle", "cilClearAll", "cilClipboard", "cilClock", "cilClone", "cilClosedCaptioning", "cilCloudDownload", "cilCloudUpload", "cilCloud", "cilCloudy", "cilCode", "cilCoffee", "cilCog", "cilColorBorder", "cilColorFill", "cilColorPalette", "cilColumns", "cilCommand", "cilCommentBubble", "cilCommentSquare", "cilCompass", "cilCompress", "cilContact", "cilContrast", "cilControl", "cilCopy", "cilCouch", "cilCreditCard", "cilCropRotate", "cilCrop", "cilCursorMove", "cilCursor", "cilCut", "cilDataTransferDown", "cilDataTransferUp", "cilDeaf", "cilDelete", "cilDescription", "cilDevices", "cilDialpad", "cilDiamond", "cilDinner", "cilDisabled", "cilDog", "cilDollar", "cilDoor", "cilDoubleQuoteSansLeft", "cilDoubleQuoteSansRight", "cilDrinkAlcohol", "cilDrink", "cilDrop", "cilEco", "cilEducation", "cilElevator", "cilEnvelopeClosed", "cilEnvelopeLetter", "cilEnvelopeOpen", "cilEqualizer", "cilEthernet", "cilEuro", "cilExcerpt", "cilExitToApp", "cilExpandDown", "cilExpandLeft", "cilExpandRight", "cilExpandUp", "cilExposure", "cilExternalLink", "cilEyedropper", "cilFaceDead", "cilFace", "cilFactorySlash", "cilFactory", "cilFastfood", "cilFax", "cilFeaturedPlaylist", "cilFile", "cilFilterFrames", "cilFilterPhoto", "cilFilterSquare", "cilFilterX", "cilFilter", "cilFindInPage", "cilFingerprint", "cilFire", "cilFlagAlt", "cilFlightTakeoff", "cilFlipToBack", "cilFlipToFront", "cilFlip", "cilFlower", "cilFolderOpen", "cilFolder", "cilFont", "cilFootball", "cilFork", "cilFridge", "cilFrown", "cilFullscreenExit", "cilFullscreen", "cilFunctionsAlt", "cilFunctions", "cilGamepad", "cilGarage", "cilGem", "cilGif", "cilGift", "cilGlobeAlt", "cilGolfAlt", "cilGolf", "cilGradient", "cilGrain", "cilGraph", "cilGridSlash", "cilGrid", "cilGroup", "cilHamburgerMenu", "cilHandPointDown", "cilHandPointLeft", "cilHandPointRight", "cilHandPointUp", "cilHappy", "cilHd", "cilHdr", "cilHeader", "cilHeadphones", "cilHealing", "cilHeart", "cilHighlighter", "cilHighligt", "cilHistory", "cilHome", "cilHospital", "cilHotTub", "cilHouse", "cilHttps", "cilImageBroken", "cilImagePlus", "cilImage", "cilInbox", "cilIndentDecrease", "cilIndentIncrease", "cilIndustrySlash", "cilIndustry", "cilInfinity", "cilInfo", "cilInputHdmi", "cilInputPower", "cilInput", "cilInstitution", "cilItalic", "cilJustifyCenter", "cilJustifyLeft", "cilJustifyRight", "cilKeyboard", "cilLan", "cilLanguage", "cilLaptop", "cilLayers", "cilLeaf", "cilLemon", "cilLevelDown", "cilLevelUp", "cilLibraryAdd", "cilLibraryBuilding", "cilLibrary", "cilLifeRing", "cilLightbulb", "cilLineSpacing", "cilLineStyle", "cilLineWeight", "cilLinkAlt", "cilLinkBroken", "cilLink", "cilListFilter", "cilListHighPriority", "cilListLowPriority", "cilListNumberedRtl", "cilListNumbered", "cilListRich", "cilList", "cilLocationPin", "cilLockLocked", "cilLockUnlocked", "cilLocomotive", "cilLoop1", "cilLoopCircular", "cilLoop", "cilLowVision", "cilMagnifyingGlass", "cilMap", "cilMediaEject", "cilMediaPause", "cilMediaPlay", "cilMediaRecord", "cilMediaSkipBackward", "cilMediaSkipForward", "cilMediaStepBackward", "cilMediaStepForward", "cilMediaStop", "cilMedicalCross", "cilMeh", "cilMemory", "cilMenu", "cilMic", "cilMicrophone", "cilMinus", "cilMobileLandscape", "cilMobile", "cilMoney", "cilMonitor", "cilMoodBad", "cilMoodGood", "cilMoodVeryBad", "cilMoodVeryGood", "cilMoon", "cilMouse", "cilMouthSlash", "cilMove", "cilMovie", "cilMugTea", "cilMug", "cilMusicNote", "cilNewspaper", "cilNoteAdd", "cilNotes", "cilObjectGroup", "cilObjectUngroup", "cilOpacity", "cilOpentype", "cilOptions", "cilPaintBucket", "cilPaint", "cilPaperPlane", "cilPaperclip", "cilParagraph", "cilPaw", "cilPenAlt", "cilPenNib", "cilPen", "cilPencil", "cilPeople", "cilPhone", "cilPin", "cilPizza", "cilPlant", "cilPlaylistAdd", "cilPlus", "cilPool", "cilPowerStandby", "cilPregnant", "cilPrint", "cilPushchair", "cilPuzzle", "cilQrCode", "cilRain", "cilRectangle", "cilRecycle", "cilReload", "cilReportSlash", "cilResizeBoth", "cilResizeHeight", "cilResizeWidth", "cilRestaurant", "cilRoom", "cilRouter", "cilRowing", "cilRss", "cilRuble", "cilRunning", "cilSad", "cilSatelite", "cilSave", "cilSchool", "cilScreenDesktop", "cilScreenSmartphone", "cilScrubber", "cilSearch", "cilSend", "cilSettings", "cilShareAll", "cilShareAlt", "cilShareBoxed", "cilShare", "cilShieldAlt", "cilShortText", "cilShower", "cilSignLanguage", "cilSignalCellular0", "cilSignalCellular3", "cilSignalCellular4", "cilSim", "cilSitemap", "cilSmilePlus", "cilSmile", "cilSmokeFree", "cilSmokeSlash", "cilSmoke", "cilSmokingRoom", "cilSnowflake", "cilSoccer", "cilSofa", "cilSortAlphaDown", "cilSortAlphaUp", "cilSortAscending", "cilSortDescending", "cilSortNumericDown", "cilSortNumericUp", "cilSpa", "cilSpaceBar", "cilSpeak", "cilSpeaker", "cilSpeech", "cilSpeedometer", "cilSpreadsheet", "cilSquare", "cilStarHalf", "cilStar", "cilStorage", "cilStream", "cilStrikethrough", "cilSun", "cilSwapHorizontal", "cilSwapVertical", "cilSwimming", "cilSync", "cilTablet", "cilTag", "cilTags", "cilTask", "cilTaxi", "cilTennisBall", "cilTennis", "cilTerminal", "cilTerrain", "cilTextShapes", "cilTextSize", "cilTextSquare", "cilTextStrike", "cilText", "cilThumbDown", "cilThumbUp", "cilToggleOff", "cilToggleOn", "cilToilet", "cilTouchApp", "cilTransfer", "cilTranslate", "cilTrash", "cilTriangle", "cilTruck", "cilTv", "cilUnderline", "cilUsb", "cilUserFemale", "cilUserFollow", "cilUserPlus", "cilUserUnfollow", "cilUserX", "cilUser", "cilVector", "cilVerticalAlignBottom", "cilVerticalAlignCenter", "cilVerticalAlignTop", "cilVideo", "cilVideogame", "cilViewColumn", "cilViewModule", "cilViewQuilt", "cilViewStream", "cilVoiceOverRecord", "cilVoice", "cilVolumeHigh", "cilVolumeLow", "cilVolumeOff", "cilWalk", "cilWallet", "cilWallpaper", "cilWarning", "cilWatch", "cilWc", "cilWeightlifitng", "cilWheelchair", "cilWifiSignal0", "cilWifiSignal1", "cilWifiSignal2", "cilWifiSignal3", "cilWifiSignal4", "cilWifiSignalOff", "cilWindowMaximize", "cilWindowMinimize", "cilWindowRestore", "cilWindow", "cilWrapText", "cilXCircle", "cilX", "cilYen", "cilZoomIn", "cilZoomOut", "cilZoom"];
     const brandIcons = ["cib500px5", "cib500px", "cibAboutMe", "cibAbstract", "cibAcm", "cibAddthis", "cibAdguard", "cibAdobeAcrobatReader", "cibAdobeAfterEffects", "cibAdobeAudition", "cibAdobeCreativeCloud", "cibAdobeDreamweaver", "cibAdobeIllustrator", "cibAdobeIndesign", "cibAdobeLightroomClassic", "cibAdobeLightroom", "cibAdobePhotoshop", "cibAdobePremiere", "cibAdobeTypekit", "cibAdobeXd", "cibAdobe", "cibAirbnb", "cibAlgolia", "cibAlipay", "cibAllocine", "cibAmazonAws", "cibAmazonPay", "cibAmazon", "cibAmd", "cibAmericanExpress", "cibAnaconda", "cibAnalogue", "cibAndroidAlt", "cibAndroid", "cibAngellist", "cibAngularUniversal", "cibAngular", "cibAnsible", "cibApacheAirflow", "cibApacheFlink", "cibApacheSpark", "cibApache", "cibAppStoreIos", "cibAppStore", "cibAppleMusic", "cibApplePay", "cibApplePodcasts", "cibApple", "cibAppveyor", "cibAral", "cibArchLinux", "cibArchiveOfOurOwn", "cibArduino", "cibArtstation", "cibArxiv", "cibAsana", "cibAtAndT", "cibAtlassian", "cibAtom", "cibAudible", "cibAurelia", "cibAuth0", "cibAutomatic", "cibAutotask", "cibAventrix", "cibAzureArtifacts", "cibAzureDevops", "cibAzurePipelines", "cibBabel", "cibBaidu", "cibBamboo", "cibBancontact", "cibBandcamp", "cibBasecamp", "cibBathasu", "cibBehance", "cibBigCartel", "cibBing", "cibBit", "cibBitbucket", "cibBitcoin", "cibBitdefender", "cibBitly", "cibBlackberry", "cibBlender", "cibBloggerB", "cibBlogger", "cibBluetoothB", "cibBluetooth", "cibBoeing", "cibBoost", "cibBootstrap", "cibBower", "cibBrandAi", "cibBrave", "cibBtc", "cibBuddy", "cibBuffer", "cibBuyMeACoffee", "cibBuysellads", "cibBuzzfeed", "cibC", "cibCakephp", "cibCampaignMonitor", "cibCanva", "cibCashapp", "cibCassandra", "cibCastro", "cibCcAmazonPay", "cibCcAmex", "cibCcApplePay", "cibCcDinersClub", "cibCcDiscover", "cibCcJcb", "cibCcMastercard", "cibCcPaypal", "cibCcStripe", "cibCcVisa", "cibCentos", "cibCevo", "cibChase", "cibChef", "cibChromecast", "cibCircle", "cibCircleci", "cibCirrusci", "cibCisco", "cibCivicrm", "cibClockify", "cibClojure", "cibCloudbees", "cibCloudflare", "cibCmake", "cibCoOp", "cibCodacy", "cibCodeClimate", "cibCodecademy", "cibCodecov", "cibCodeigniter", "cibCodepen", "cibCoderwall", "cibCodesandbox", "cibCodeship", "cibCodewars", "cibCodio", "cibCoffeescript", "cibCommonWorkflowLanguage", "cibComposer", "cibCondaForge", "cibConekta", "cibConfluence", "cibCoreuiC", "cibCoreui", "cibCoursera", "cibCoveralls", "cibCpanel", "cibCplusplus", "cibCreativeCommonsBy", "cibCreativeCommonsNcEu", "cibCreativeCommonsNcJp", "cibCreativeCommonsNc", "cibCreativeCommonsNd", "cibCreativeCommonsPdAlt", "cibCreativeCommonsPd", "cibCreativeCommonsRemix", "cibCreativeCommonsSa", "cibCreativeCommonsSamplingPlus", "cibCreativeCommonsSampling", "cibCreativeCommonsShare", "cibCreativeCommonsZero", "cibCreativeCommons", "cibCrunchbase", "cibCrunchyroll", "cibCss3Shiled", "cibCss3", "cibCsswizardry", "cibD3Js", "cibDailymotion", "cibDashlane", "cibDazn", "cibDblp", "cibDebian", "cibDeepin", "cibDeezer", "cibDelicious", "cibDell", "cibDeno", "cibDependabot", "cibDesignerNews", "cibDevTo", "cibDeviantart", "cibDevrant", "cibDiaspora", "cibDigg", "cibDigitalOcean", "cibDiscord", "cibDiscourse", "cibDiscover", "cibDisqus", "cibDisroot", "cibDjango", "cibDocker", "cibDocusign", "cibDotNet", "cibDraugiemLv", "cibDribbble", "cibDrone", "cibDropbox", "cibDrupal", "cibDtube", "cibDuckduckgo", "cibDynatrace", "cibEbay", "cibEclipseide", "cibElasticCloud", "cibElasticSearch", "cibElasticStack", "cibElastic", "cibElectron", "cibElementary", "cibEleventy", "cibEllo", "cibElsevier", "cibEmlakjet", "cibEmpirekred", "cibEnvato", "cibEpicGames", "cibEpson", "cibEsea", "cibEslint", "cibEthereum", "cibEtsy", "cibEventStore", "cibEventbrite", "cibEvernote", "cibEverplaces", "cibEvry", "cibExercism", "cibExpertsExchange", "cibExpo", "cibEyeem", "cibFSecure", "cibFacebookF", "cibFacebook", "cibFaceit", "cibFandango", "cibFavro", "cibFeathub", "cibFedex", "cibFedora", "cibFeedly", "cibFidoAlliance", "cibFigma", "cibFilezilla", "cibFirebase", "cibFitbit", "cibFlask", "cibFlattr", "cibFlickr", "cibFlipboard", "cibFlutter", "cibFnac", "cibFoursquare", "cibFramer", "cibFreebsd", "cibFreecodecamp", "cibFurAffinity", "cibFurryNetwork", "cibGarmin", "cibGatsby", "cibGauges", "cibGenius", "cibGentoo", "cibGeocaching", "cibGerrit", "cibGg", "cibGhost", "cibGimp", "cibGit", "cibGitea", "cibGithub", "cibGitkraken", "cibGitlab", "cibGitpod", "cibGitter", "cibGlassdoor", "cibGlitch", "cibGmail", "cibGnuPrivacyGuard", "cibGnuSocial", "cibGnu", "cibGo", "cibGodotEngine", "cibGogCom", "cibGoldenline", "cibGoodreads", "cibGoogleAds", "cibGoogleAllo", "cibGoogleAnalytics", "cibGoogleChrome", "cibGoogleCloud", "cibGoogleKeep", "cibGooglePay", "cibGooglePlay", "cibGooglePodcasts", "cibGoogle", "cibGooglesCholar", "cibGovUk", "cibGradle", "cibGrafana", "cibGraphcool", "cibGraphql", "cibGrav", "cibGravatar", "cibGreenkeeper", "cibGreensock", "cibGroovy", "cibGroupon", "cibGrunt", "cibGulp", "cibGumroad", "cibGumtree", "cibHabr", "cibHackaday", "cibHackerearth", "cibHackerone", "cibHackerrank", "cibHackhands", "cibHackster", "cibHappycow", "cibHashnode", "cibHaskell", "cibHatenaBookmark", "cibHaxe", "cibHelm", "cibHere", "cibHeroku", "cibHexo", "cibHighly", "cibHipchat", "cibHitachi", "cibHockeyapp", "cibHomify", "cibHootsuite", "cibHotjar", "cibHouzz", "cibHp", "cibHtml5Shield", "cibHtml5", "cibHtmlacademy", "cibHuawei", "cibHubspot", "cibHulu", "cibHumbleBundle", "cibIata", "cibIbm", "cibIcloud", "cibIconjar", "cibIcq", "cibIdeal", "cibIfixit", "cibImdb", "cibIndeed", "cibInkscape", "cibInstacart", "cibInstagram", "cibInstapaper", "cibIntel", "cibIntellijidea", "cibIntercom", "cibInternetExplorer", "cibInvision", "cibIonic", "cibIssuu", "cibItchIo", "cibJabber", "cibJava", "cibJavascript", "cibJekyll", "cibJenkins", "cibJest", "cibJet", "cibJetbrains", "cibJira", "cibJoomla", "cibJquery", "cibJs", "cibJsdelivr", "cibJsfiddle", "cibJson", "cibJupyter", "cibJustgiving", "cibKaggle", "cibKaios", "cibKaspersky", "cibKentico", "cibKeras", "cibKeybase", "cibKeycdn", "cibKhanAcademy", "cibKibana", "cibKickstarter", "cibKik", "cibKirby", "cibKlout", "cibKnown", "cibKoFi", "cibKodi", "cibKoding", "cibKotlin", "cibKrita", "cibKubernetes", "cibLanyrd", "cibLaravelHorizon", "cibLaravelNova", "cibLaravel", "cibLastFm", "cibLatex", "cibLaunchpad", "cibLeetcode", "cibLenovo", "cibLess", "cibLetsEncrypt", "cibLetterboxd", "cibLgtm", "cibLiberapay", "cibLibrarything", "cibLibreoffice", "cibLine", "cibLinkedinIn", "cibLinkedin", "cibLinuxFoundation", "cibLinuxMint", "cibLinux", "cibLivejournal", "cibLivestream", "cibLogstash", "cibLua", "cibLumen", "cibLyft", "cibMacys", "cibMagento", "cibMagisk", "cibMailRu", "cibMailchimp", "cibMakerbot", "cibManjaro", "cibMarkdown", "cibMarketo", "cibMastercard", "cibMastodon", "cibMaterialDesign", "cibMathworks", "cibMatrix", "cibMattermost", "cibMatternet", "cibMaxcdn", "cibMcafee", "cibMediaTemple", "cibMediafire", "cibMediumM", "cibMedium", "cibMeetup", "cibMega", "cibMendeley", "cibMessenger", "cibMeteor", "cibMicroBlog", "cibMicrogenetics", "cibMicrosoftEdge", "cibMicrosoft", "cibMinetest", "cibMinutemailer", "cibMix", "cibMixcloud", "cibMixer", "cibMojang", "cibMonero", "cibMongodb", "cibMonkeytie", "cibMonogram", "cibMonzo", "cibMoo", "cibMozillaFirefox", "cibMozilla", "cibMusescore", "cibMxlinux", "cibMyspace", "cibMysql", "cibNativescript", "cibNec", "cibNeo4J", "cibNetflix", "cibNetlify", "cibNextJs", "cibNextcloud", "cibNextdoor", "cibNginx", "cibNim", "cibNintendo3Ds", "cibNintendoGamecube", "cibNintendoSwitch", "cibNintendo", "cibNodeJs", "cibNodeRed", "cibNodemon", "cibNokia", "cibNotion", "cibNpm", "cibNucleo", "cibNuget", "cibNuxtJs", "cibNvidia", "cibOcaml", "cibOctave", "cibOctopusDeploy", "cibOculus", "cibOdnoklassniki", "cibOpenAccess", "cibOpenCollective", "cibOpenId", "cibOpenSourceInitiative", "cibOpenstreetmap", "cibOpensuse", "cibOpenvpn", "cibOpera", "cibOpsgenie", "cibOracle", "cibOrcid", "cibOrigin", "cibOsi", "cibOsmc", "cibOvercast", "cibOverleaf", "cibOvh", "cibPagekit", "cibPalantir", "cibPandora", "cibPantheon", "cibPatreon", "cibPaypal", "cibPeriscope", "cibPhp", "cibPicartoTv", "cibPinboard", "cibPingdom", "cibPingup", "cibPinterestP", "cibPinterest", "cibPivotaltracker", "cibPlangrid", "cibPlayerMe", "cibPlayerfm", "cibPlaystation", "cibPlaystation3", "cibPlaystation4", "cibPlesk", "cibPlex", "cibPluralsight", "cibPlurk", "cibPocket", "cibPostgresql", "cibPostman", "cibPostwoman", "cibPowershell", "cibPrettier", "cibPrismic", "cibProbot", "cibProcesswire", "cibProductHunt", "cibProtoIo", "cibProtonmail", "cibProxmox", "cibPypi", "cibPython", "cibPytorch", "cibQgis", "cibQiita", "cibQq", "cibQualcomm", "cibQuantcast", "cibQuantopian", "cibQuarkus", "cibQuora", "cibQwiklabs", "cibQzone", "cibR", "cibRadiopublic", "cibRails", "cibRaspberryPi", "cibReact", "cibReadTheDocs", "cibReadme", "cibRealm", "cibReason", "cibRedbubble", "cibRedditAlt", "cibReddit", "cibRedhat", "cibRedis", "cibRedux", "cibRenren", "cibReverbnation", "cibRiot", "cibRipple", "cibRiseup", "cibRollupJs", "cibRoots", "cibRoundcube", "cibRss", "cibRstudio", "cibRuby", "cibRubygems", "cibRunkeeper", "cibRust", "cibSafari", "cibSahibinden", "cibSalesforce", "cibSaltstack", "cibSamsungPay", "cibSamsung", "cibSap", "cibSassAlt", "cibSass", "cibSaucelabs", "cibScala", "cibScaleway", "cibScribd", "cibScrutinizerci", "cibSeagate", "cibSega", "cibSellfy", "cibSemaphoreci", "cibSensu", "cibSentry", "cibServerFault", "cibShazam", "cibShell", "cibShopify", "cibShowpad", "cibSiemens", "cibSignal", "cibSinaWeibo", "cibSitepoint", "cibSketch", "cibSkillshare", "cibSkyliner", "cibSkype", "cibSlack", "cibSlashdot", "cibSlickpic", "cibSlides", "cibSlideshare", "cibSmashingmagazine", "cibSnapchat", "cibSnapcraft", "cibSnyk", "cibSociety6", "cibSocketIo", "cibSogou", "cibSolus", "cibSongkick", "cibSonos", "cibSoundcloud", "cibSourceforge", "cibSourcegraph", "cibSpacemacs", "cibSpacex", "cibSparkfun", "cibSparkpost", "cibSpdx", "cibSpeakerDeck", "cibSpectrum", "cibSpotify", "cibSpotlight", "cibSpreaker", "cibSpring", "cibSprint", "cibSquarespace", "cibStackbit", "cibStackexchange", "cibStackoverflow", "cibStackpath", "cibStackshare", "cibStadia", "cibStatamic", "cibStaticman", "cibStatuspage", "cibSteam", "cibSteem", "cibSteemit", "cibStitcher", "cibStorify", "cibStorybook", "cibStrapi", "cibStrava", "cibStripeS", "cibStripe", "cibStubhub", "cibStumbleupon", "cibStyleshare", "cibStylus", "cibSublimeText", "cibSubversion", "cibSuperuser", "cibSvelte", "cibSvg", "cibSwagger", "cibSwarm", "cibSwift", "cibSymantec", "cibSymfony", "cibSynology", "cibTMobile", "cibTableau", "cibTails", "cibTapas", "cibTeamviewer", "cibTed", "cibTeespring", "cibTelegramPlane", "cibTelegram", "cibTencentQq", "cibTencentWeibo", "cibTensorflow", "cibTerraform", "cibTesla", "cibTheMighty", "cibTheMovieDatabase", "cibTidal", "cibTiktok", "cibTinder", "cibTodoist", "cibToggl", "cibTopcoder", "cibToptal", "cibTor", "cibToshiba", "cibTrainerroad", "cibTrakt", "cibTravisci", "cibTreehouse", "cibTrello", "cibTripadvisor", "cibTrulia", "cibTumblr", "cibTwilio", "cibTwitch", "cibTwitter", "cibTwoo", "cibTypescript", "cibTypo3", "cibUber", "cibUbisoft", "cibUblockOrigin", "cibUbuntu", "cibUdacity", "cibUdemy", "cibUikit", "cibUmbraco", "cibUnity", "cibUnrealEngine", "cibUnsplash", "cibUntappd", "cibUpwork", "cibUsb", "cibV8", "cibVagrant", "cibVenmo", "cibVerizon", "cibViadeo", "cibViber", "cibVim", "cibVimeoV", "cibVimeo", "cibVine", "cibVirb", "cibVisa", "cibVisualStudioCode", "cibVisualStudio", "cibVk", "cibVlc", "cibVsco", "cibVueJs", "cibWattpad", "cibWeasyl", "cibWebcomponentsOrg", "cibWebpack", "cibWebstorm", "cibWechat", "cibWhatsapp", "cibWhenIWork", "cibWii", "cibWiiu", "cibWikipedia", "cibWindows", "cibWire", "cibWireguard", "cibWix", "cibWolframLanguage", "cibWolframMathematica", "cibWolfram", "cibWordpress", "cibWpengine", "cibXPack", "cibXbox", "cibXcode", "cibXero", "cibXiaomi", "cibXing", "cibXrp", "cibXsplit", "cibYCombinator", "cibYahoo", "cibYammer", "cibYandex", "cibYarn", "cibYelp", "cibYoutube", "cibZalando", "cibZapier", "cibZeit", "cibZendesk", "cibZerply", "cibZillow", "cibZingat", "cibZoom", "cibZorin", "cibZulip"];
     const flagIcons = ["cifAd", "cifAe", "cifAf", "cifAg", "cifAl", "cifAm", "cifAo", "cifAr", "cifAt", "cifAu", "cifAz", "cifBa", "cifBb", "cifBd", "cifBe", "cifBf", "cifBg", "cifBh", "cifBi", "cifBj", "cifBn", "cifBo", "cifBr", "cifBs", "cifBt", "cifBw", "cifBy", "cifBz", "cifCa", "cifCd", "cifCf", "cifCg", "cifCh", "cifCi", "cifCl", "cifCm", "cifCn", "cifCo", "cifCr", "cifCu", "cifCv", "cifCy", "cifCz", "cifDe", "cifDj", "cifDk", "cifDm", "cifDo", "cifDz", "cifEc", "cifEe", "cifEg", "cifEr", "cifEs", "cifEt", "cifFi", "cifFj", "cifFm", "cifFr", "cifGa", "cifGb", "cifGd", "cifGe", "cifGh", "cifGm", "cifGn", "cifGq", "cifGr", "cifGt", "cifGw", "cifGy", "cifHk", "cifHn", "cifHr", "cifHt", "cifHu", "cifId", "cifIe", "cifIl", "cifIn", "cifIq", "cifIr", "cifIs", "cifIt", "cifJm", "cifJo", "cifJp", "cifKe", "cifKg", "cifKh", "cifKi", "cifKm", "cifKn", "cifKp", "cifKr", "cifKw", "cifKz", "cifLa", "cifLb", "cifLc", "cifLi", "cifLk", "cifLr", "cifLs", "cifLt", "cifLu", "cifLv", "cifLy", "cifMa", "cifMc", "cifMd", "cifMe", "cifMg", "cifMh", "cifMk", "cifMl", "cifMm", "cifMn", "cifMr", "cifMt", "cifMu", "cifMv", "cifMw", "cifMx", "cifMy", "cifMz", "cifNa", "cifNe", "cifNg", "cifNi", "cifNl", "cifNo", "cifNp", "cifNr", "cifNu", "cifNz", "cifOm", "cifPa", "cifPe", "cifPg", "cifPh", "cifPk", "cifPl", "cifPt", "cifPw", "cifPy", "cifQa", "cifRo", "cifRs", "cifRu", "cifRw", "cifSa", "cifSb", "cifSc", "cifSd", "cifSe", "cifSg", "cifSi", "cifSk", "cifSl", "cifSm", "cifSn", "cifSo", "cifSr", "cifSs", "cifSt", "cifSv", "cifSy", "cifSz", "cifTd", "cifTg", "cifTh", "cifTj", "cifTl", "cifTm", "cifTn", "cifTo", "cifTr", "cifTt", "cifTv", "cifTw", "cifTz", "cifUa", "cifUg", "cifUs", "cifUy", "cifUz", "cifVa", "cifVc", "cifVe", "cifVn", "cifWs", "cifXk", "cifYe", "cifZa", "cifZm", "cifZw"];
     const tabPaneActiveKey = ref(1);
-    return {
-      tabPaneActiveKey,
-      linearIcons,
-      brandIcons,
-      flagIcons,
-      icon
-    };
+    const __returned__ = { linearIcons, brandIcons, flagIcons, tabPaneActiveKey, ref, get CIcon() {
+      return CIcon;
+    }, get icon() {
+      return icon;
+    } };
+    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>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_1 = /* @__PURE__ */ createStaticVNode('<h2 id="installation" tabindex="-1">Installation <a class="anchor-link" href="#installation">#</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">#</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">#</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">#</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">#</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_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 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> 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></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></div><h3 id="all-icons" tabindex="-1">All icons <a class="anchor-link" href="#all-icons">#</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 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> 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></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></div><h3 id="icons-object" tabindex="-1">Icons object <a class="anchor-link" href="#icons-object">#</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">#</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">#</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_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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-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">#</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_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">#</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_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">#</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",
@@ -4782,16 +4781,15 @@ const _hoisted_39 = /* @__PURE__ */ createBaseVNode("svg", {
     ])
   ])
 ], -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_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>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> 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></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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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);
+const _hoisted_49 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cicon" tabindex="-1">CIcon <a class="anchor-link" href="#cicon">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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");
@@ -4803,47 +4801,47 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", null, [
     _hoisted_1,
     createBaseVNode("div", _hoisted_11, [
-      createVNode(_component_CIcon, {
+      createVNode($setup["CIcon"], {
         icon: $setup.icon.cilList,
         size: "xl"
       }, null, 8, ["icon"]),
-      createVNode(_component_CIcon, {
+      createVNode($setup["CIcon"], {
         icon: $setup.icon.cilShieldAlt,
         size: "xl"
       }, null, 8, ["icon"])
     ]),
     _hoisted_12,
     createBaseVNode("div", _hoisted_26, [
-      createVNode(_component_CIcon, {
+      createVNode($setup["CIcon"], {
         icon: $setup.icon.cilList,
         size: "xl"
       }, null, 8, ["icon"]),
-      createVNode(_component_CIcon, {
+      createVNode($setup["CIcon"], {
         icon: $setup.icon.cilList,
         class: "text-primary",
         size: "xl"
       }, null, 8, ["icon"]),
-      createVNode(_component_CIcon, {
+      createVNode($setup["CIcon"], {
         icon: $setup.icon.cilList,
         class: "text-secondary",
         size: "xl"
       }, null, 8, ["icon"]),
-      createVNode(_component_CIcon, {
+      createVNode($setup["CIcon"], {
         icon: $setup.icon.cilList,
         class: "text-success",
         size: "xl"
       }, null, 8, ["icon"]),
-      createVNode(_component_CIcon, {
+      createVNode($setup["CIcon"], {
         icon: $setup.icon.cilList,
         class: "text-danger",
         size: "xl"
       }, null, 8, ["icon"]),
-      createVNode(_component_CIcon, {
+      createVNode($setup["CIcon"], {
         icon: $setup.icon.cilList,
         class: "text-warning",
         size: "xl"
       }, null, 8, ["icon"]),
-      createVNode(_component_CIcon, {
+      createVNode($setup["CIcon"], {
         icon: $setup.icon.cilList,
         class: "text-info",
         size: "xl"
@@ -4851,12 +4849,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     _hoisted_27,
     createBaseVNode("div", _hoisted_30, [
-      createVNode(_component_CIcon, {
+      createVNode($setup["CIcon"], {
         icon: $setup.icon.cilList,
         size: "xl",
         style: { "--ci-primary-color": "red" }
       }, null, 8, ["icon"]),
-      createVNode(_component_CIcon, {
+      createVNode($setup["CIcon"], {
         icon: $setup.icon.cilList,
         size: "xl",
         style: { "--ci-primary-color": "green" }
@@ -4864,26 +4862,26 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ]),
     _hoisted_31,
     createBaseVNode("div", _hoisted_34, [
-      createVNode(_component_CIcon, {
+      createVNode($setup["CIcon"], {
         icon: $setup.icon.cilList,
         size: "sm"
       }, null, 8, ["icon"]),
-      createVNode(_component_CIcon, {
+      createVNode($setup["CIcon"], {
         icon: $setup.icon.cilList
       }, null, 8, ["icon"]),
-      createVNode(_component_CIcon, {
+      createVNode($setup["CIcon"], {
         icon: $setup.icon.cilList,
         size: "lg"
       }, null, 8, ["icon"]),
-      createVNode(_component_CIcon, {
+      createVNode($setup["CIcon"], {
         icon: $setup.icon.cilList,
         size: "xl"
       }, null, 8, ["icon"]),
-      createVNode(_component_CIcon, {
+      createVNode($setup["CIcon"], {
         icon: $setup.icon.cilList,
         size: "xxl"
       }, null, 8, ["icon"]),
-      createVNode(_component_CIcon, {
+      createVNode($setup["CIcon"], {
         icon: $setup.icon.cilList,
         size: "3xl"
       }, null, 8, ["icon"])
@@ -4975,11 +4973,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               lg: { cols: 5 }
             }, {
               default: withCtx(() => [
-                (openBlock(true), createElementBlock(Fragment, null, renderList($setup.linearIcons, (i) => {
-                  return openBlock(), createBlock(_component_CCol, { class: "mb-4" }, {
+                (openBlock(), createElementBlock(Fragment, null, renderList($setup.linearIcons, (i) => {
+                  return createVNode(_component_CCol, { class: "mb-4" }, {
                     default: withCtx(() => [
                       createBaseVNode("div", _hoisted_43, [
-                        createVNode(_component_CIcon, {
+                        createVNode($setup["CIcon"], {
                           icon: $setup.icon[i],
                           size: "xxl"
                         }, null, 8, ["icon"])
@@ -4988,7 +4986,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                     ]),
                     _: 2
                   }, 1024);
-                }), 256))
+                }), 64))
               ]),
               _: 1
             })) : createCommentVNode("", true)
@@ -5008,11 +5006,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               lg: { cols: 5 }
             }, {
               default: withCtx(() => [
-                (openBlock(true), createElementBlock(Fragment, null, renderList($setup.brandIcons, (i) => {
-                  return openBlock(), createBlock(_component_CCol, { class: "mb-4" }, {
+                (openBlock(), createElementBlock(Fragment, null, renderList($setup.brandIcons, (i) => {
+                  return createVNode(_component_CCol, { class: "mb-4" }, {
                     default: withCtx(() => [
                       createBaseVNode("div", _hoisted_45, [
-                        createVNode(_component_CIcon, {
+                        createVNode($setup["CIcon"], {
                           icon: $setup.icon[i],
                           size: "xxl"
                         }, null, 8, ["icon"])
@@ -5021,7 +5019,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                     ]),
                     _: 2
                   }, 1024);
-                }), 256))
+                }), 64))
               ]),
               _: 1
             })) : createCommentVNode("", true)
@@ -5041,11 +5039,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               lg: { cols: 5 }
             }, {
               default: withCtx(() => [
-                (openBlock(true), createElementBlock(Fragment, null, renderList($setup.flagIcons, (i) => {
-                  return openBlock(), createBlock(_component_CCol, { class: "mb-4" }, {
+                (openBlock(), createElementBlock(Fragment, null, renderList($setup.flagIcons, (i) => {
+                  return createVNode(_component_CCol, { class: "mb-4" }, {
                     default: withCtx(() => [
                       createBaseVNode("div", _hoisted_47, [
-                        createVNode(_component_CIcon, {
+                        createVNode($setup["CIcon"], {
                           icon: $setup.icon[i],
                           size: "xxl"
                         }, null, 8, ["icon"])
@@ -5054,7 +5052,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                     ]),
                     _: 2
                   }, 1024);
-                }), 256))
+                }), 64))
               ]),
               _: 1
             })) : createCommentVNode("", true)
diff --git a/vue/docs/assets/image.html-DC5HLYH1.js b/vue/docs/assets/image.html-G4Gptwhr.js
similarity index 85%
rename from vue/docs/assets/image.html-DC5HLYH1.js
rename to vue/docs/assets/image.html-G4Gptwhr.js
index de931277e5d..4913be37682 100644
--- a/vue/docs/assets/image.html-DC5HLYH1.js
+++ b/vue/docs/assets/image.html-G4Gptwhr.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "responsive-images",
@@ -7,8 +7,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Responsive images "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#responsive-images",
-    "aria-hidden": "true"
+    href: "#responsive-images"
   }, "#")
 ], -1);
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
@@ -21,9 +20,9 @@ const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__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_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">#</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_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">#</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);
@@ -32,7 +31,7 @@ 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);
+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">#</a></h2><h3 id="cimage" tabindex="-1">CImage <a class="anchor-link" href="#cimage">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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, [
diff --git a/vue/docs/assets/index.html-CXtJwXEn.js b/vue/docs/assets/index.html-CXtJwXEn.js
new file mode 100644
index 00000000000..1bb7a1788ec
--- /dev/null
+++ b/vue/docs/assets/index.html-CXtJwXEn.js
@@ -0,0 +1,11 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div");
+}
+const index_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "index.html.vue"]]);
+const data = JSON.parse('{"path":"/","title":"","lang":"en-US","frontmatter":{"head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/"}]]},"headers":[],"filePathRelative":"index.md"}');
+export {
+  index_html as comp,
+  data
+};
diff --git a/vue/docs/assets/input-group.html-BD4KH7gA.js b/vue/docs/assets/input-group.html-DD48IpLE.js
similarity index 97%
rename from vue/docs/assets/input-group.html-BD4KH7gA.js
rename to vue/docs/assets/input-group.html-DD48IpLE.js
index 4072e6c4df2..d73fce05807 100644
--- a/vue/docs/assets/input-group.html-BD4KH7gA.js
+++ b/vue/docs/assets/input-group.html-DD48IpLE.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "basic-example",
@@ -7,8 +7,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Basic example "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#basic-example",
-    "aria-hidden": "true"
+    href: "#basic-example"
   }, "#")
 ], -1);
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
@@ -17,23 +16,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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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">#</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 +50,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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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);
+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">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables">#</a></h3>', 3);
+const _hoisted_61 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cinputgroup" tabindex="-1">CInputGroup <a class="anchor-link" href="#cinputgroup">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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-BPr4o7jo.js b/vue/docs/assets/input.html-DQVoju7F.js
similarity index 82%
rename from vue/docs/assets/input.html-BPr4o7jo.js
rename to vue/docs/assets/input.html-DQVoju7F.js
index 09d2bc4a450..6374790ebb2 100644
--- a/vue/docs/assets/input.html-BPr4o7jo.js
+++ b/vue/docs/assets/input.html-DQVoju7F.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "example",
@@ -7,20 +7,19 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Example "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#example",
-    "aria-hidden": "true"
+    href: "#example"
   }, "#")
 ], -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_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">#</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_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">#</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_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">#</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_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">#</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" };
@@ -29,15 +28,15 @@ 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_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">#</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_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">#</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_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">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables">#</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 "),
@@ -52,7 +51,7 @@ 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);
+const _hoisted_48 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cforminput" tabindex="-1">CFormInput <a class="anchor-link" href="#cforminput">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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");
diff --git a/vue/docs/assets/installation.html-B9oaQNAO.js b/vue/docs/assets/installation.html-B9oaQNAO.js
deleted file mode 100644
index 5b4f6bcbbd8..00000000000
--- a/vue/docs/assets/installation.html-B9oaQNAO.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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 = [
-  _hoisted_1
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_20);
-}
-const installation_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "installation.html.vue"]]);
-const data = JSON.parse('{"path":"/templates/installation.html","title":"Vue templates installation","lang":"en-US","frontmatter":{"title":"Vue templates installation","name":"Vue templates installation","description":"Learn how to use CoreUI Vue Admin Dashboard Templates including npm scripts to build templates, compile source code, run tests, and more.","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/templates/installation.html"}]]},"headers":[{"level":2,"title":"Tooling setup","slug":"tooling-setup","link":"#tooling-setup","children":[]},{"level":2,"title":"Using npm scripts","slug":"using-npm-scripts","link":"#using-npm-scripts","children":[]},{"level":2,"title":"Sass","slug":"sass","link":"#sass","children":[]},{"level":2,"title":"Autoprefixer","slug":"autoprefixer","link":"#autoprefixer","children":[]},{"level":2,"title":"Local template","slug":"local-template","link":"#local-template","children":[]},{"level":2,"title":"Troubleshooting","slug":"troubleshooting","link":"#troubleshooting","children":[]}],"filePathRelative":"templates/installation.md"}');
-export {
-  installation_html as comp,
-  data
-};
diff --git a/vue/docs/assets/installation.html-CwOfF37v.js b/vue/docs/assets/installation.html-CwOfF37v.js
new file mode 100644
index 00000000000..6938d43767f
--- /dev/null
+++ b/vue/docs/assets/installation.html-CwOfF37v.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {};
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="tooling-setup" tabindex="-1">Tooling setup <a class="anchor-link" href="#tooling-setup">#</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">#</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">#</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">#</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">#</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">#</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 = [
+  _hoisted_1
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_20);
+}
+const installation_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "installation.html.vue"]]);
+const data = JSON.parse('{"path":"/templates/installation.html","title":"Vue templates installation","lang":"en-US","frontmatter":{"title":"Vue templates installation","name":"Vue templates installation","description":"Learn how to use CoreUI Vue Admin Dashboard Templates including npm scripts to build templates, compile source code, run tests, and more.","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/templates/installation.html"}]]},"headers":[{"level":2,"title":"Tooling setup","slug":"tooling-setup","link":"#tooling-setup","children":[]},{"level":2,"title":"Using npm scripts","slug":"using-npm-scripts","link":"#using-npm-scripts","children":[]},{"level":2,"title":"Sass","slug":"sass","link":"#sass","children":[]},{"level":2,"title":"Autoprefixer","slug":"autoprefixer","link":"#autoprefixer","children":[]},{"level":2,"title":"Local template","slug":"local-template","link":"#local-template","children":[]},{"level":2,"title":"Troubleshooting","slug":"troubleshooting","link":"#troubleshooting","children":[]}],"filePathRelative":"templates/installation.md"}');
+export {
+  installation_html as comp,
+  data
+};
diff --git a/vue/docs/assets/introduction.html-CuiibolQ.js b/vue/docs/assets/introduction.html-B-WFaD00.js
similarity index 88%
rename from vue/docs/assets/introduction.html-CuiibolQ.js
rename to vue/docs/assets/introduction.html-B-WFaD00.js
index eb94544f293..f07d95f18c7 100644
--- a/vue/docs/assets/introduction.html-CuiibolQ.js
+++ b/vue/docs/assets/introduction.html-B-WFaD00.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, d as createVNode, e as withCtx, b as createBaseVNode, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "installation",
@@ -7,8 +7,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Installation "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#installation",
-    "aria-hidden": "true"
+    href: "#installation"
   }, "#")
 ], -1);
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("h3", {
@@ -18,8 +17,7 @@ const _hoisted_2 = /* @__PURE__ */ createBaseVNode("h3", {
   /* @__PURE__ */ createTextVNode("Npm "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#npm",
-    "aria-hidden": "true"
+    href: "#npm"
   }, "#")
 ], -1);
 const _hoisted_3 = /* @__PURE__ */ createBaseVNode("div", {
@@ -81,8 +79,7 @@ const _hoisted_5 = /* @__PURE__ */ createBaseVNode("h3", {
   /* @__PURE__ */ createTextVNode("Yarn "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#yarn",
-    "aria-hidden": "true"
+    href: "#yarn"
   }, "#")
 ], -1);
 const _hoisted_6 = /* @__PURE__ */ createBaseVNode("div", {
@@ -144,8 +141,7 @@ const _hoisted_8 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Using components "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#using-components",
-    "aria-hidden": "true"
+    href: "#using-components"
   }, "#")
 ], -1);
 const _hoisted_9 = /* @__PURE__ */ createBaseVNode("div", {
@@ -212,7 +208,7 @@ const _hoisted_10 = /* @__PURE__ */ createBaseVNode("div", {
     /* @__PURE__ */ createBaseVNode("div", { class: "line-number" })
   ])
 ], -1);
-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_11 = /* @__PURE__ */ createStaticVNode('<h2 id="stylesheets" tabindex="-1">Stylesheets <a class="anchor-link" href="#stylesheets">#</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">#</a></h3><h6 id="basic-usage" tabindex="-1">Basic usage <a class="anchor-link" href="#basic-usage">#</a></h6>', 4);
 const _hoisted_15 = /* @__PURE__ */ createBaseVNode("div", {
   class: "language-javascript line-numbers-mode",
   "data-highlighter": "prismjs",
@@ -263,7 +259,7 @@ const _hoisted_16 = /* @__PURE__ */ createBaseVNode("div", {
     /* @__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-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);
+const _hoisted_17 = /* @__PURE__ */ createStaticVNode('<h3 id="bootstrap-css-files" tabindex="-1">Bootstrap CSS files <a class="anchor-link" href="#bootstrap-css-files">#</a></h3><h6 id="installation-1" tabindex="-1">Installation <a class="anchor-link" href="#installation-1">#</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">#</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-DARLKo8o.js b/vue/docs/assets/layout.html-B1WhSZXl.js
similarity index 96%
rename from vue/docs/assets/layout.html-DARLKo8o.js
rename to vue/docs/assets/layout.html-B1WhSZXl.js
index ef47a8954e9..792040726be 100644
--- a/vue/docs/assets/layout.html-DARLKo8o.js
+++ b/vue/docs/assets/layout.html-B1WhSZXl.js
@@ -1,23 +1,23 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, a as createStaticVNode, f as createTextVNode } from "./app-DGOUrGv-.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_1 = /* @__PURE__ */ createStaticVNode('<h2 id="forms" tabindex="-1">Forms <a class="anchor-link" href="#forms">#</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">#</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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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);
@@ -29,7 +29,7 @@ const _hoisted_46 = /* @__PURE__ */ createBaseVNode("option", null, "Choose...",
 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-highlighter="prismjs" data-ext="vue" data-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_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">#</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);
diff --git a/vue/docs/assets/link.html-C2tbxGSf.js b/vue/docs/assets/link.html-DgFWlsMX.js
similarity index 91%
rename from vue/docs/assets/link.html-C2tbxGSf.js
rename to vue/docs/assets/link.html-DgFWlsMX.js
index 0216df25f69..0ee74cffd94 100644
--- a/vue/docs/assets/link.html-C2tbxGSf.js
+++ b/vue/docs/assets/link.html-DgFWlsMX.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, d as createVNode, e as withCtx, b as createBaseVNode, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "examples",
@@ -7,11 +7,10 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Examples "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#examples",
-    "aria-hidden": "true"
+    href: "#examples"
   }, "#")
 ], -1);
-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);
+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">#</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-ChBEIPwp.js b/vue/docs/assets/list-group.html-_udCts7M.js
similarity index 90%
rename from vue/docs/assets/list-group.html-ChBEIPwp.js
rename to vue/docs/assets/list-group.html-_udCts7M.js
index aa1fd3b1193..d97a613cf3d 100644
--- a/vue/docs/assets/list-group.html-ChBEIPwp.js
+++ b/vue/docs/assets/list-group.html-_udCts7M.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, F as Fragment, h as renderList, f as createTextVNode, a as createStaticVNode, t as toDisplayString } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "basic-example",
@@ -7,25 +7,24 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Basic example "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#basic-example",
-    "aria-hidden": "true"
+    href: "#basic-example"
   }, "#")
 ], -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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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" };
@@ -38,13 +37,12 @@ const _hoisted_35 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("With badges "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#with-badges",
-    "aria-hidden": "true"
+    href: "#with-badges"
   }, "#")
 ], -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-highlighter="prismjs" data-ext="vue" data-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_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">#</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 +62,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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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);
+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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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">#</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">#</a></h3>', 3);
+const _hoisted_65 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="clistgroup" tabindex="-1">CListGroup <a class="anchor-link" href="#clistgroup">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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-BwfYal81.js b/vue/docs/assets/loading-button.html-DU_pRN89.js
similarity index 83%
rename from vue/docs/assets/loading-button.html-BwfYal81.js
rename to vue/docs/assets/loading-button.html-DU_pRN89.js
index c2ccc9b7245..c8ec43c9a30 100644
--- a/vue/docs/assets/loading-button.html-BwfYal81.js
+++ b/vue/docs/assets/loading-button.html-DU_pRN89.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "example",
@@ -7,17 +7,16 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Example "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#example",
-    "aria-hidden": "true"
+    href: "#example"
   }, "#")
 ], -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-highlighter="prismjs" data-ext="vue" data-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_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">#</a></h2><h3 id="border-default" tabindex="-1">Border (Default) <a class="anchor-link" href="#border-default">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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);
+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">#</a></h2><h3 id="cloadingbutton" tabindex="-1">CLoadingButton <a class="anchor-link" href="#cloadingbutton">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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-KOyG7M6n.js b/vue/docs/assets/modal.html-BHtWUNx_.js
similarity index 53%
rename from vue/docs/assets/modal.html-KOyG7M6n.js
rename to vue/docs/assets/modal.html-BHtWUNx_.js
index 3c9cdb53413..434e0ed3e54 100644
--- a/vue/docs/assets/modal.html-KOyG7M6n.js
+++ b/vue/docs/assets/modal.html-BHtWUNx_.js
@@ -1,26 +1,29 @@
-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";
+import { _ as _export_sfc, g as ref, r as resolveComponent, X as resolveDirective, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, f as createTextVNode, a as createStaticVNode, Y as withDirectives, V as createBlock } from "./app-DGOUrGv-.js";
 const _sfc_main = {
-  data() {
-    return {
-      visibleLiveDemo: false,
-      visibleStaticBackdropDemo: false,
-      visibleScrollingLongContentDemo: false,
-      visibleScrollableDemo: false,
-      visibleVerticallyCenteredDemo: false,
-      visibleVerticallyCenteredScrollableDemo: false,
-      visibleTooltipsAndPopoversDemo: false,
-      visibleToggleBetweenModalsDemo1: false,
-      visibleToggleBetweenModalsDemo2: false,
-      xlDemo: false,
-      lgDemo: false,
-      smDemo: false,
-      fullscreenDemo: false,
-      fullscreenSmDemo: false,
-      fullscreenMdDemo: false,
-      fullscreenLgDemo: false,
-      fullscreenXlDemo: false,
-      fullscreenXxlDemo: false
-    };
+  __name: "modal.html",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const visibleLiveDemo = ref(false);
+    const visibleStaticBackdropDemo = ref(false);
+    const visibleScrollingLongContentDemo = ref(false);
+    const visibleScrollableDemo = ref(false);
+    const visibleVerticallyCenteredDemo = ref(false);
+    const visibleVerticallyCenteredScrollableDemo = ref(false);
+    const visibleTooltipsAndPopoversDemo = ref(false);
+    const visibleToggleBetweenModalsDemo1 = ref(false);
+    const visibleToggleBetweenModalsDemo2 = ref(false);
+    const xlDemo = ref(false);
+    const lgDemo = ref(false);
+    const smDemo = ref(false);
+    const fullscreenDemo = ref(false);
+    const fullscreenSmDemo = ref(false);
+    const fullscreenMdDemo = ref(false);
+    const fullscreenLgDemo = ref(false);
+    const fullscreenXlDemo = ref(false);
+    const fullscreenXxlDemo = ref(false);
+    const __returned__ = { visibleLiveDemo, visibleStaticBackdropDemo, visibleScrollingLongContentDemo, visibleScrollableDemo, visibleVerticallyCenteredDemo, visibleVerticallyCenteredScrollableDemo, visibleTooltipsAndPopoversDemo, visibleToggleBetweenModalsDemo1, visibleToggleBetweenModalsDemo2, xlDemo, lgDemo, smDemo, fullscreenDemo, fullscreenSmDemo, fullscreenMdDemo, fullscreenLgDemo, fullscreenXlDemo, fullscreenXxlDemo, ref };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 };
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
@@ -30,8 +33,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Examples "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#examples",
-    "aria-hidden": "true"
+    href: "#examples"
   }, "#")
 ], -1);
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("h3", {
@@ -41,8 +43,7 @@ const _hoisted_2 = /* @__PURE__ */ createBaseVNode("h3", {
   /* @__PURE__ */ createTextVNode("Modal components "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#modal-components",
-    "aria-hidden": "true"
+    href: "#modal-components"
   }, "#")
 ], -1);
 const _hoisted_3 = /* @__PURE__ */ createBaseVNode("p", null, [
@@ -55,11 +56,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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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>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 class="token keyword">const</span> visibleLiveDemo <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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-highlighter="prismjs" data-ext="vue" data-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_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>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 class="token keyword">const</span> visibleStaticBackdropDemo <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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 +80,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-highlighter="prismjs" data-ext="vue" data-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_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>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 class="token keyword">const</span> visibleScrollingLongContentDemo <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-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 +100,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-highlighter="prismjs" data-ext="vue" data-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_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>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 class="token keyword">const</span> visibleScrollableDemo <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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-highlighter="prismjs" data-ext="vue" data-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_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>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 class="token keyword">const</span> visibleVerticallyCenteredDemo <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-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-highlighter="prismjs" data-ext="vue" data-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_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>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 class="token keyword">const</span> visibleVerticallyCenteredScrollableDemo <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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-highlighter="prismjs" data-ext="vue" data-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_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>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 class="token keyword">const</span> visibleTooltipsAndPopoversDemo <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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-highlighter="prismjs" data-ext="vue" data-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_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>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 class="token keyword">const</span> visibleToggleBetweenModalsDemo1 <span class="token operator">=</span> <span class="token function">ref</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 keyword">const</span> visibleToggleBetweenModalsDemo2 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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">#</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">#</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">#</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-highlighter="prismjs" data-ext="vue" data-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_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>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 class="token keyword">const</span> xlDemo <span class="token operator">=</span> <span class="token function">ref</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 keyword">const</span> lgDemo <span class="token operator">=</span> <span class="token function">ref</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 keyword">const</span> smDemo <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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-highlighter="prismjs" data-ext="vue" data-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_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>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 class="token keyword">const</span> fullscreenDemo <span class="token operator">=</span> <span class="token function">ref</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 keyword">const</span> fullscreenSmDemo <span class="token operator">=</span> <span class="token function">ref</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 keyword">const</span> fullscreenMdDemo <span class="token operator">=</span> <span class="token function">ref</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 keyword">const</span> fullscreenLgDemo <span class="token operator">=</span> <span class="token function">ref</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 keyword">const</span> fullscreenXlDemo <span class="token operator">=</span> <span class="token function">ref</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 keyword">const</span> fullscreenXxlDemo <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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">#</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">#</a></h3>', 3);
 const _hoisted_99 = /* @__PURE__ */ createBaseVNode("h3", {
   id: "sass-loops",
   tabindex: "-1"
@@ -125,8 +126,7 @@ const _hoisted_99 = /* @__PURE__ */ createBaseVNode("h3", {
   /* @__PURE__ */ createTextVNode("SASS loops "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#sass-loops",
-    "aria-hidden": "true"
+    href: "#sass-loops"
   }, "#")
 ], -1);
 const _hoisted_100 = /* @__PURE__ */ createBaseVNode("p", null, [
@@ -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-highlighter="prismjs" data-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);
+const _hoisted_101 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cmodal" tabindex="-1">CModal <a class="anchor-link" href="#cmodal">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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>container</strong> <br><div class="badge bg-primary">5.3.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-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">5.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>teleport</strong> <br><div class="badge bg-primary">5.3.0+</div></td><td>Generates modal using Teleport.</td><td>boolean</td><td>-</td><td>false</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">#</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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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");
@@ -204,7 +204,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_CButton, {
         color: "primary",
         onClick: _cache[0] || (_cache[0] = () => {
-          $data.visibleLiveDemo = true;
+          $setup.visibleLiveDemo = true;
         })
       }, {
         default: withCtx(() => [
@@ -213,9 +213,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         _: 1
       }),
       createVNode(_component_CModal, {
-        visible: $data.visibleLiveDemo,
+        visible: $setup.visibleLiveDemo,
         onClose: _cache[2] || (_cache[2] = () => {
-          $data.visibleLiveDemo = false;
+          $setup.visibleLiveDemo = false;
         }),
         "aria-labelledby": "LiveDemoExampleLabel"
       }, {
@@ -242,7 +242,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               createVNode(_component_CButton, {
                 color: "secondary",
                 onClick: _cache[1] || (_cache[1] = () => {
-                  $data.visibleLiveDemo = false;
+                  $setup.visibleLiveDemo = false;
                 })
               }, {
                 default: withCtx(() => [
@@ -268,7 +268,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_CButton, {
         color: "primary",
         onClick: _cache[3] || (_cache[3] = () => {
-          $data.visibleStaticBackdropDemo = true;
+          $setup.visibleStaticBackdropDemo = true;
         })
       }, {
         default: withCtx(() => [
@@ -278,9 +278,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       }),
       createVNode(_component_CModal, {
         backdrop: "static",
-        visible: $data.visibleStaticBackdropDemo,
+        visible: $setup.visibleStaticBackdropDemo,
         onClose: _cache[5] || (_cache[5] = () => {
-          $data.visibleStaticBackdropDemo = false;
+          $setup.visibleStaticBackdropDemo = false;
         }),
         "aria-labelledby": "StaticBackdropExampleLabel"
       }, {
@@ -307,7 +307,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               createVNode(_component_CButton, {
                 color: "secondary",
                 onClick: _cache[4] || (_cache[4] = () => {
-                  $data.visibleStaticBackdropDemo = false;
+                  $setup.visibleStaticBackdropDemo = false;
                 })
               }, {
                 default: withCtx(() => [
@@ -333,7 +333,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_CButton, {
         color: "primary",
         onClick: _cache[6] || (_cache[6] = () => {
-          $data.visibleScrollingLongContentDemo = true;
+          $setup.visibleScrollingLongContentDemo = true;
         })
       }, {
         default: withCtx(() => [
@@ -342,9 +342,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         _: 1
       }),
       createVNode(_component_CModal, {
-        visible: $data.visibleScrollingLongContentDemo,
+        visible: $setup.visibleScrollingLongContentDemo,
         onClose: _cache[7] || (_cache[7] = () => {
-          $data.visibleScrollingLongContentDemo = false;
+          $setup.visibleScrollingLongContentDemo = false;
         }),
         "aria-labelledby": "ScrollingLongContentExampleLabel"
       }, {
@@ -392,7 +392,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_CButton, {
         color: "primary",
         onClick: _cache[8] || (_cache[8] = () => {
-          $data.visibleScrollableDemo = true;
+          $setup.visibleScrollableDemo = true;
         })
       }, {
         default: withCtx(() => [
@@ -402,9 +402,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       }),
       createVNode(_component_CModal, {
         scrollable: "",
-        visible: $data.visibleScrollableDemo,
+        visible: $setup.visibleScrollableDemo,
         onClose: _cache[9] || (_cache[9] = () => {
-          $data.visibleScrollableDemo = false;
+          $setup.visibleScrollableDemo = false;
         }),
         "aria-labelledby": "ScrollingLongContentExampleLabel2"
       }, {
@@ -452,7 +452,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_CButton, {
         color: "primary",
         onClick: _cache[10] || (_cache[10] = () => {
-          $data.visibleVerticallyCenteredDemo = true;
+          $setup.visibleVerticallyCenteredDemo = true;
         })
       }, {
         default: withCtx(() => [
@@ -462,9 +462,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       }),
       createVNode(_component_CModal, {
         alignment: "center",
-        visible: $data.visibleVerticallyCenteredDemo,
+        visible: $setup.visibleVerticallyCenteredDemo,
         onClose: _cache[12] || (_cache[12] = () => {
-          $data.visibleVerticallyCenteredDemo = false;
+          $setup.visibleVerticallyCenteredDemo = false;
         }),
         "aria-labelledby": "VerticallyCenteredExample"
       }, {
@@ -491,7 +491,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               createVNode(_component_CButton, {
                 color: "secondary",
                 onClick: _cache[11] || (_cache[11] = () => {
-                  $data.visibleVerticallyCenteredDemo = false;
+                  $setup.visibleVerticallyCenteredDemo = false;
                 })
               }, {
                 default: withCtx(() => [
@@ -517,7 +517,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_CButton, {
         color: "primary",
         onClick: _cache[13] || (_cache[13] = () => {
-          $data.visibleVerticallyCenteredScrollableDemo = true;
+          $setup.visibleVerticallyCenteredScrollableDemo = true;
         })
       }, {
         default: withCtx(() => [
@@ -528,9 +528,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_CModal, {
         alignment: "center",
         scrollable: "",
-        visible: $data.visibleVerticallyCenteredScrollableDemo,
+        visible: $setup.visibleVerticallyCenteredScrollableDemo,
         onClose: _cache[15] || (_cache[15] = () => {
-          $data.visibleVerticallyCenteredScrollableDemo = false;
+          $setup.visibleVerticallyCenteredScrollableDemo = false;
         }),
         "aria-labelledby": "VerticallyCenteredExample2"
       }, {
@@ -557,7 +557,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               createVNode(_component_CButton, {
                 color: "secondary",
                 onClick: _cache[14] || (_cache[14] = () => {
-                  $data.visibleVerticallyCenteredScrollableDemo = false;
+                  $setup.visibleVerticallyCenteredScrollableDemo = false;
                 })
               }, {
                 default: withCtx(() => [
@@ -583,7 +583,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_CButton, {
         color: "primary",
         onClick: _cache[16] || (_cache[16] = () => {
-          $data.visibleTooltipsAndPopoversDemo = true;
+          $setup.visibleTooltipsAndPopoversDemo = true;
         })
       }, {
         default: withCtx(() => [
@@ -592,9 +592,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         _: 1
       }),
       createVNode(_component_CModal, {
-        visible: $data.visibleTooltipsAndPopoversDemo,
+        visible: $setup.visibleTooltipsAndPopoversDemo,
         onClose: _cache[18] || (_cache[18] = () => {
-          $data.visibleTooltipsAndPopoversDemo = false;
+          $setup.visibleTooltipsAndPopoversDemo = false;
         }),
         "aria-labelledby": "TooltipsAndPopoverExample"
       }, {
@@ -654,7 +654,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               createVNode(_component_CButton, {
                 color: "secondary",
                 onClick: _cache[17] || (_cache[17] = () => {
-                  $data.visibleTooltipsAndPopoversDemo = false;
+                  $setup.visibleTooltipsAndPopoversDemo = false;
                 })
               }, {
                 default: withCtx(() => [
@@ -680,7 +680,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_CButton, {
         color: "primary",
         onClick: _cache[19] || (_cache[19] = () => {
-          $data.visibleToggleBetweenModalsDemo1 = true;
+          $setup.visibleToggleBetweenModalsDemo1 = true;
         })
       }, {
         default: withCtx(() => [
@@ -689,9 +689,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         _: 1
       }),
       createVNode(_component_CModal, {
-        visible: $data.visibleToggleBetweenModalsDemo1,
+        visible: $setup.visibleToggleBetweenModalsDemo1,
         onClose: _cache[21] || (_cache[21] = () => {
-          $data.visibleToggleBetweenModalsDemo1 = false;
+          $setup.visibleToggleBetweenModalsDemo1 = false;
         }),
         "aria-labelledby": "ToggleBetweenModalsExample1"
       }, {
@@ -718,8 +718,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               createVNode(_component_CButton, {
                 color: "primary",
                 onClick: _cache[20] || (_cache[20] = () => {
-                  $data.visibleToggleBetweenModalsDemo1 = false;
-                  $data.visibleToggleBetweenModalsDemo2 = true;
+                  $setup.visibleToggleBetweenModalsDemo1 = false;
+                  $setup.visibleToggleBetweenModalsDemo2 = true;
                 })
               }, {
                 default: withCtx(() => [
@@ -734,10 +734,10 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         _: 1
       }, 8, ["visible"]),
       createVNode(_component_CModal, {
-        visible: $data.visibleToggleBetweenModalsDemo2,
+        visible: $setup.visibleToggleBetweenModalsDemo2,
         onClose: _cache[23] || (_cache[23] = () => {
-          $data.visibleToggleBetweenModalsDemo1 = true;
-          $data.visibleToggleBetweenModalsDemo2 = false;
+          $setup.visibleToggleBetweenModalsDemo1 = true;
+          $setup.visibleToggleBetweenModalsDemo2 = false;
         }),
         "aria-labelledby": "ToggleBetweenModalsExample2"
       }, {
@@ -764,8 +764,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               createVNode(_component_CButton, {
                 color: "primary",
                 onClick: _cache[22] || (_cache[22] = () => {
-                  $data.visibleToggleBetweenModalsDemo1 = true;
-                  $data.visibleToggleBetweenModalsDemo2 = false;
+                  $setup.visibleToggleBetweenModalsDemo1 = true;
+                  $setup.visibleToggleBetweenModalsDemo2 = false;
                 })
               }, {
                 default: withCtx(() => [
@@ -785,7 +785,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_CButton, {
         color: "primary",
         onClick: _cache[24] || (_cache[24] = () => {
-          $data.xlDemo = true;
+          $setup.xlDemo = true;
         })
       }, {
         default: withCtx(() => [
@@ -796,7 +796,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_CButton, {
         color: "primary",
         onClick: _cache[25] || (_cache[25] = () => {
-          $data.lgDemo = true;
+          $setup.lgDemo = true;
         })
       }, {
         default: withCtx(() => [
@@ -807,7 +807,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_CButton, {
         color: "primary",
         onClick: _cache[26] || (_cache[26] = () => {
-          $data.smDemo = true;
+          $setup.smDemo = true;
         })
       }, {
         default: withCtx(() => [
@@ -817,9 +817,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       }),
       createVNode(_component_CModal, {
         size: "xl",
-        visible: $data.xlDemo,
+        visible: $setup.xlDemo,
         onClose: _cache[27] || (_cache[27] = () => {
-          $data.xlDemo = false;
+          $setup.xlDemo = false;
         }),
         "aria-labelledby": "OptionalSizesExample1"
       }, {
@@ -846,9 +846,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       }, 8, ["visible"]),
       createVNode(_component_CModal, {
         size: "lg",
-        visible: $data.lgDemo,
+        visible: $setup.lgDemo,
         onClose: _cache[28] || (_cache[28] = () => {
-          $data.lgDemo = false;
+          $setup.lgDemo = false;
         }),
         "aria-labelledby": "OptionalSizesExample2"
       }, {
@@ -875,9 +875,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       }, 8, ["visible"]),
       createVNode(_component_CModal, {
         size: "sm",
-        visible: $data.smDemo,
+        visible: $setup.smDemo,
         onClose: _cache[29] || (_cache[29] = () => {
-          $data.smDemo = false;
+          $setup.smDemo = false;
         }),
         "aria-labelledby": "OptionalSizesExample3"
       }, {
@@ -908,7 +908,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_CButton, {
         color: "primary",
         onClick: _cache[30] || (_cache[30] = () => {
-          $data.fullscreenDemo = true;
+          $setup.fullscreenDemo = true;
         })
       }, {
         default: withCtx(() => [
@@ -919,7 +919,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_CButton, {
         color: "primary",
         onClick: _cache[31] || (_cache[31] = () => {
-          $data.fullscreenSmDemo = true;
+          $setup.fullscreenSmDemo = true;
         })
       }, {
         default: withCtx(() => [
@@ -930,7 +930,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_CButton, {
         color: "primary",
         onClick: _cache[32] || (_cache[32] = () => {
-          $data.fullscreenMdDemo = true;
+          $setup.fullscreenMdDemo = true;
         })
       }, {
         default: withCtx(() => [
@@ -941,7 +941,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_CButton, {
         color: "primary",
         onClick: _cache[33] || (_cache[33] = () => {
-          $data.fullscreenLgDemo = true;
+          $setup.fullscreenLgDemo = true;
         })
       }, {
         default: withCtx(() => [
@@ -952,7 +952,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_CButton, {
         color: "primary",
         onClick: _cache[34] || (_cache[34] = () => {
-          $data.fullscreenXlDemo = true;
+          $setup.fullscreenXlDemo = true;
         })
       }, {
         default: withCtx(() => [
@@ -963,7 +963,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_CButton, {
         color: "primary",
         onClick: _cache[35] || (_cache[35] = () => {
-          $data.fullscreenXxlDemo = true;
+          $setup.fullscreenXxlDemo = true;
         })
       }, {
         default: withCtx(() => [
@@ -973,9 +973,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       }),
       createVNode(_component_CModal, {
         fullscreen: "",
-        visible: $data.fullscreenDemo,
+        visible: $setup.fullscreenDemo,
         onClose: _cache[36] || (_cache[36] = () => {
-          $data.fullscreenDemo = false;
+          $setup.fullscreenDemo = false;
         }),
         "aria-labelledby": "FullscreenExample1"
       }, {
@@ -1002,9 +1002,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       }, 8, ["visible"]),
       createVNode(_component_CModal, {
         fullscreen: "sm",
-        visible: $data.fullscreenSmDemo,
+        visible: $setup.fullscreenSmDemo,
         onClose: _cache[37] || (_cache[37] = () => {
-          $data.fullscreenSmDemo = false;
+          $setup.fullscreenSmDemo = false;
         }),
         "aria-labelledby": "FullscreenExample2"
       }, {
@@ -1031,9 +1031,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       }, 8, ["visible"]),
       createVNode(_component_CModal, {
         fullscreen: "md",
-        visible: $data.fullscreenMdDemo,
+        visible: $setup.fullscreenMdDemo,
         onClose: _cache[38] || (_cache[38] = () => {
-          $data.fullscreenMdDemo = false;
+          $setup.fullscreenMdDemo = false;
         }),
         "aria-labelledby": "FullscreenExample3"
       }, {
@@ -1060,9 +1060,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       }, 8, ["visible"]),
       createVNode(_component_CModal, {
         fullscreen: "lg",
-        visible: $data.fullscreenLgDemo,
+        visible: $setup.fullscreenLgDemo,
         onClose: _cache[39] || (_cache[39] = () => {
-          $data.fullscreenLgDemo = false;
+          $setup.fullscreenLgDemo = false;
         }),
         "aria-labelledby": "FullscreenExample4"
       }, {
@@ -1089,9 +1089,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       }, 8, ["visible"]),
       createVNode(_component_CModal, {
         fullscreen: "xl",
-        visible: $data.fullscreenXlDemo,
+        visible: $setup.fullscreenXlDemo,
         onClose: _cache[40] || (_cache[40] = () => {
-          $data.fullscreenXlDemo = false;
+          $setup.fullscreenXlDemo = false;
         }),
         "aria-labelledby": "FullscreenExample5"
       }, {
@@ -1118,9 +1118,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       }, 8, ["visible"]),
       createVNode(_component_CModal, {
         fullscreen: "xxl",
-        visible: $data.fullscreenXxlDemo,
+        visible: $setup.fullscreenXxlDemo,
         onClose: _cache[41] || (_cache[41] = () => {
-          $data.fullscreenXxlDemo = false;
+          $setup.fullscreenXxlDemo = false;
         }),
         "aria-labelledby": "FullscreenExample6"
       }, {
diff --git a/vue/docs/assets/multi-select.html-DP6UryqG.js b/vue/docs/assets/multi-select.html-DP6UryqG.js
deleted file mode 100644
index 7ff7b1a32a3..00000000000
--- a/vue/docs/assets/multi-select.html-DP6UryqG.js
+++ /dev/null
@@ -1,539 +0,0 @@
-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/multi-select.html-DtyKZra7.js b/vue/docs/assets/multi-select.html-DtyKZra7.js
new file mode 100644
index 00000000000..af5c9be1d31
--- /dev/null
+++ b/vue/docs/assets/multi-select.html-DtyKZra7.js
@@ -0,0 +1,540 @@
+import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, U as CIcon, f as createTextVNode, a as createStaticVNode, t as toDisplayString } from "./app-DGOUrGv-.js";
+import { d as cifPl, c as cifDe, e as cifUs, a as cifEs, b as cifGb } from "./cif-us-C2ywU_oW.js";
+const _sfc_main = {
+  __name: "multi-select.html",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const availableCities = ref([]);
+    const loading = ref(false);
+    const users = ref([]);
+    const 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"
+          }
+        ]
+      }
+    ];
+    const countries = [
+      {
+        value: "pl",
+        label: "Poland"
+      },
+      {
+        value: "de",
+        label: "Germany"
+      },
+      {
+        value: "us",
+        label: "United States"
+      },
+      {
+        value: "es",
+        label: "Spain"
+      },
+      {
+        value: "gb",
+        label: "United Kingdom"
+      }
+    ];
+    const 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" }
+        ]
+      }
+    ];
+    const flags = {
+      de: cifDe,
+      es: cifEs,
+      gb: cifGb,
+      pl: cifPl,
+      us: cifUs
+    };
+    const 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"
+          }
+        ]
+      }
+    ];
+    const 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"
+          }
+        ]
+      }
+    ];
+    const getUsers = async (name = "") => {
+      loading.value = true;
+      fetch(`https://apitest.coreui.io/demos/users?first_name=${name}`).then((response) => response.json()).then((result) => {
+        loading.value = false;
+        users.value = result.records.map((record) => ({
+          value: record.id,
+          label: record.first_name
+        }));
+      });
+    };
+    const setCities = (cities2) => {
+      availableCities.value = cities2;
+    };
+    const __returned__ = { availableCities, loading, users, cities, countries, countries2, flags, options, options2, getUsers, setCities, ref, get cifPl() {
+      return cifPl;
+    }, get cifDe() {
+      return cifDe;
+    }, get cifUs() {
+      return cifUs;
+    }, get cifEs() {
+      return cifEs;
+    }, get cifGb() {
+      return cifGb;
+    }, get CIcon() {
+      return CIcon;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+};
+const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
+  id: "examples",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("Examples "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#examples"
+  }, "#")
+], -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>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> options <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>\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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-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>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> options2 <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>\n<span class="line">    <span class="token punctuation">}</span><span class="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>\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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</a></h2><h3 id="allow-create-options" tabindex="-1">Allow create options <a class="anchor-link" href="#allow-create-options">#</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>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> <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>\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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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>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> <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>\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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-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">#</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">#</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>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> options <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>\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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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>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> options <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>\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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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>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> options <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>\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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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>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> options <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>\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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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>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 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>\n<span class="line">  <span class="token keyword">const</span> availableCities <span class="token operator">=</span> <span class="token function">ref</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">const</span> cities <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>\n<span class="line">  <span class="token keyword">const</span> countries <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>\n<span class="line">  <span class="token keyword">const</span> flags <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></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>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 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 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 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 class="token punctuation">&gt;</span></span></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 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 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 class="token punctuation">&gt;</span></span></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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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>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 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>\n<span class="line">  <span class="token keyword">const</span> availableCities <span class="token operator">=</span> <span class="token function">ref</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">const</span> countries2 <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>\n<span class="line">  <span class="token keyword">const</span> flags <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>\n<span class="line">  <span class="token keyword">const</span> <span class="token function-variable function">setCities</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">cities</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">    availableCities<span class="token punctuation">.</span>value <span class="token operator">=</span> cities</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 class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span></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>availableCities<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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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>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> options <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>\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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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>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> options <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>\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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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>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> loading <span class="token operator">=</span> <span class="token function">ref</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 keyword">const</span> users <span class="token operator">=</span> <span class="token function">ref</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>\n<span class="line">  <span class="token keyword">const</span> getUsers <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span>name <span class="token operator">=</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span></span>\n<span class="line">    loading<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">true</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?first_name=</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>name<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">        loading<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">false</span></span>\n<span class="line">        users<span class="token punctuation">.</span>value <span class="token operator">=</span> result<span class="token punctuation">.</span>records<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">record</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 punctuation">{</span></span>\n<span class="line">            <span class="token literal-property property">value</span><span class="token operator">:</span> record<span class="token punctuation">.</span>id<span class="token punctuation">,</span></span>\n<span class="line">            <span class="token literal-property property">label</span><span class="token operator">:</span> record<span class="token punctuation">.</span>first_name<span class="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></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>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 class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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">#</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">#</a></h3>', 3);
+const _hoisted_72 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cmultiselect" tabindex="-1">CMultiSelect <a class="anchor-link" href="#cmultiselect">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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_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: $setup.options,
+        text: "Please select your framework."
+      })
+    ]),
+    _hoisted_4,
+    createBaseVNode("div", _hoisted_5, [
+      createVNode(_component_CMultiSelect, { options: $setup.options2 })
+    ]),
+    _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: $setup.options
+      })
+    ]),
+    _hoisted_12,
+    createBaseVNode("div", _hoisted_18, [
+      createVNode(_component_CMultiSelect, {
+        clearSearchOnSelect: "",
+        options: $setup.options
+      })
+    ]),
+    _hoisted_19,
+    createBaseVNode("div", _hoisted_27, [
+      createVNode(_component_CMultiSelect, {
+        options: $setup.options2,
+        selectionType: "counter"
+      })
+    ]),
+    _hoisted_28,
+    createBaseVNode("div", _hoisted_31, [
+      createVNode(_component_CMultiSelect, {
+        options: $setup.options2,
+        selectionType: "tags"
+      })
+    ]),
+    _hoisted_32,
+    createBaseVNode("div", _hoisted_35, [
+      createVNode(_component_CMultiSelect, {
+        options: $setup.options2,
+        selectionType: "text"
+      })
+    ]),
+    _hoisted_36,
+    createBaseVNode("div", _hoisted_39, [
+      createVNode(_component_CMultiSelect, {
+        multiple: false,
+        options: $setup.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: $setup.countries,
+                optionsStyle: "text"
+              }, {
+                options: withCtx(({ option }) => [
+                  createBaseVNode("div", _hoisted_45, [
+                    createVNode($setup["CIcon"], {
+                      class: "me-3",
+                      icon: $setup.flags[option.value],
+                      size: "xl"
+                    }, null, 8, ["icon"]),
+                    createTextVNode(" " + toDisplayString(option.label), 1)
+                  ])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: 6 }, {
+            default: withCtx(() => [
+              createVNode(_component_CMultiSelect, {
+                label: "Select city",
+                options: $setup.cities
+              }, {
+                "options-groups": withCtx(({ option }) => [
+                  createBaseVNode("div", _hoisted_46, [
+                    createVNode($setup["CIcon"], {
+                      class: "me-3",
+                      icon: $setup.flags[option.code],
+                      size: "xl"
+                    }, null, 8, ["icon"]),
+                    createTextVNode(" " + toDisplayString(option.label), 1)
+                  ])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 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: $setup.countries2,
+                optionsStyle: "text",
+                onChange: _cache[0] || (_cache[0] = (country) => $setup.setCities(country.length ? country[0].cities : []))
+              }, {
+                options: withCtx(({ option }) => [
+                  createBaseVNode("div", _hoisted_51, [
+                    createVNode($setup["CIcon"], {
+                      class: "me-3",
+                      icon: $setup.flags[option.value],
+                      size: "xl"
+                    }, null, 8, ["icon"]),
+                    createTextVNode(" " + toDisplayString(option.label), 1)
+                  ])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: 6 }, {
+            default: withCtx(() => [
+              createVNode(_component_CMultiSelect, {
+                label: "Select city",
+                multiple: false,
+                options: $setup.availableCities,
+                optionsStyle: "text",
+                resetSelectionOnOptionsChange: ""
+              }, null, 8, ["options"])
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_52,
+    createBaseVNode("div", _hoisted_55, [
+      createVNode(_component_CMultiSelect, {
+        options: $setup.options2,
+        disabled: ""
+      })
+    ]),
+    _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: $setup.options,
+                selectionType: "counter",
+                size: "lg"
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, {
+            md: 6,
+            class: "mb-3"
+          }, {
+            default: withCtx(() => [
+              createVNode(_component_CMultiSelect, {
+                options: $setup.options,
+                size: "lg"
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: 6 }, {
+            default: withCtx(() => [
+              createVNode(_component_CMultiSelect, {
+                options: $setup.options,
+                selectionType: "counter",
+                size: "sm"
+              })
+            ]),
+            _: 1
+          }),
+          createVNode(_component_CCol, { md: 6 }, {
+            default: withCtx(() => [
+              createVNode(_component_CMultiSelect, {
+                options: $setup.options,
+                size: "sm"
+              })
+            ]),
+            _: 1
+          })
+        ]),
+        _: 1
+      })
+    ]),
+    _hoisted_60,
+    createBaseVNode("div", _hoisted_64, [
+      createVNode(_component_CMultiSelect, {
+        label: "Users",
+        loading: $setup.loading,
+        options: $setup.users,
+        text: "Please select your user.",
+        "virtual-scroller": "",
+        onShow: _cache[1] || (_cache[1] = () => $setup.getUsers()),
+        onFilterChange: _cache[2] || (_cache[2] = (value) => $setup.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-BCzYXKko.js b/vue/docs/assets/navbar.html-DiQHPkAN.js
similarity index 81%
rename from vue/docs/assets/navbar.html-BCzYXKko.js
rename to vue/docs/assets/navbar.html-DiQHPkAN.js
index 4dccfc4b691..867338f5979 100644
--- a/vue/docs/assets/navbar.html-BCzYXKko.js
+++ b/vue/docs/assets/navbar.html-DiQHPkAN.js
@@ -1,17 +1,20 @@
-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";
+import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, a as createStaticVNode, f as createTextVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {
-  data() {
-    return {
-      visible: true,
-      visibleExternalContent: false,
-      visibleOffcanvas: false,
-      visibleOffcanvas2: false
-    };
+  __name: "navbar.html",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const visible = ref(true);
+    const visibleExternalContent = ref(false);
+    const visibleOffcanvas = ref(false);
+    const visibleOffcanvas2 = ref(false);
+    const __returned__ = { visible, visibleExternalContent, visibleOffcanvas, visibleOffcanvas2, ref };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 };
-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_1 = /* @__PURE__ */ createStaticVNode('<h2 id="supported-content" tabindex="-1">Supported content <a class="anchor-link" href="#supported-content">#</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">#</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-highlighter="prismjs" data-ext="vue" data-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_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>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 class="token keyword">const</span> visible <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></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>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 class="token tag"><span 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 class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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-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);
@@ -20,13 +23,13 @@ const _hoisted_15 = ["src"];
 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-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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" };
@@ -34,17 +37,17 @@ const _hoisted_36 = /* @__PURE__ */ createStaticVNode('<div class="language-vue
 const _hoisted_38 = { class: "docs-example rounded-top 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>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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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" };
@@ -52,23 +55,23 @@ const _hoisted_66 = /* @__PURE__ */ createStaticVNode('<div class="language-vue
 const _hoisted_67 = { class: "docs-example rounded-top p-4" };
 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-highlighter="prismjs" data-ext="vue" data-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_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">#</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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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>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 class="token keyword">const</span> visibleExternalContent <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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-highlighter="prismjs" data-ext="vue" data-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_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>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 class="token keyword">const</span> visibleOffcanvas <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-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-highlighter="prismjs" data-ext="vue" data-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_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>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 class="token keyword">const</span> visibleOffcanvas2 <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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 +82,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-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_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">#</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">#</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"),
@@ -92,8 +95,7 @@ const _hoisted_108 = /* @__PURE__ */ createBaseVNode("h3", {
   /* @__PURE__ */ createTextVNode("SASS loops "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#sass-loops",
-    "aria-hidden": "true"
+    href: "#sass-loops"
   }, "#")
 ], -1);
 const _hoisted_109 = /* @__PURE__ */ createBaseVNode("p", null, [
@@ -106,7 +108,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-highlighter="prismjs" data-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);
+const _hoisted_110 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cnavbar" tabindex="-1">CNavbar <a class="anchor-link" href="#cnavbar">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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");
@@ -151,11 +153,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 _: 1
               }),
               createVNode(_component_CNavbarToggler, {
-                onClick: _cache[0] || (_cache[0] = ($event) => $data.visible = !$data.visible)
+                onClick: _cache[0] || (_cache[0] = ($event) => $setup.visible = !$setup.visible)
               }),
               createVNode(_component_CCollapse, {
                 class: "navbar-collapse",
-                visible: $data.visible
+                visible: $setup.visible
               }, {
                 default: withCtx(() => [
                   createVNode(_component_CNavbarNav, null, {
@@ -387,11 +389,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               createVNode(_component_CNavbarToggler, {
                 "aria-label": "Toggle navigation",
                 "aria-expanded": "{visible}",
-                onClick: _cache[1] || (_cache[1] = ($event) => $data.visible = !$data.visible)
+                onClick: _cache[1] || (_cache[1] = ($event) => $setup.visible = !$setup.visible)
               }),
               createVNode(_component_CCollapse, {
                 class: "navbar-collapse",
-                visible: $data.visible
+                visible: $setup.visible
               }, {
                 default: withCtx(() => [
                   createVNode(_component_CNavbarNav, null, {
@@ -478,11 +480,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               createVNode(_component_CNavbarToggler, {
                 "aria-label": "Toggle navigation",
                 "aria-expanded": "{visible}",
-                onClick: _cache[2] || (_cache[2] = ($event) => $data.visible = !$data.visible)
+                onClick: _cache[2] || (_cache[2] = ($event) => $setup.visible = !$setup.visible)
               }),
               createVNode(_component_CCollapse, {
                 class: "navbar-collapse",
-                visible: $data.visible
+                visible: $setup.visible
               }, {
                 default: withCtx(() => [
                   createVNode(_component_CNavbarNav, { as: "nav" }, {
@@ -549,11 +551,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               createVNode(_component_CNavbarToggler, {
                 "aria-label": "Toggle navigation",
                 "aria-expanded": "{visible}",
-                onClick: _cache[3] || (_cache[3] = ($event) => $data.visible = !$data.visible)
+                onClick: _cache[3] || (_cache[3] = ($event) => $setup.visible = !$setup.visible)
               }),
               createVNode(_component_CCollapse, {
                 class: "navbar-collapse",
-                visible: $data.visible
+                visible: $setup.visible
               }, {
                 default: withCtx(() => [
                   createVNode(_component_CNavbarNav, null, {
@@ -834,11 +836,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               createVNode(_component_CNavbarToggler, {
                 "aria-label": "Toggle navigation",
                 "aria-expanded": "{visible}",
-                onClick: _cache[4] || (_cache[4] = ($event) => $data.visible = !$data.visible)
+                onClick: _cache[4] || (_cache[4] = ($event) => $setup.visible = !$setup.visible)
               }),
               createVNode(_component_CCollapse, {
                 class: "navbar-collapse",
-                visible: $data.visible
+                visible: $setup.visible
               }, {
                 default: withCtx(() => [
                   createVNode(_component_CNavbarNav, null, {
@@ -970,11 +972,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               createVNode(_component_CNavbarToggler, {
                 "aria-label": "Toggle navigation",
                 "aria-expanded": "{visible}",
-                onClick: _cache[5] || (_cache[5] = ($event) => $data.visible = !$data.visible)
+                onClick: _cache[5] || (_cache[5] = ($event) => $setup.visible = !$setup.visible)
               }),
               createVNode(_component_CCollapse, {
                 class: "navbar-collapse",
-                visible: $data.visible
+                visible: $setup.visible
               }, {
                 default: withCtx(() => [
                   createVNode(_component_CNavbarNav, null, {
@@ -1106,11 +1108,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               createVNode(_component_CNavbarToggler, {
                 "aria-label": "Toggle navigation",
                 "aria-expanded": "{visible}",
-                onClick: _cache[6] || (_cache[6] = ($event) => $data.visible = !$data.visible)
+                onClick: _cache[6] || (_cache[6] = ($event) => $setup.visible = !$setup.visible)
               }),
               createVNode(_component_CCollapse, {
                 class: "navbar-collapse",
-                visible: $data.visible
+                visible: $setup.visible
               }, {
                 default: withCtx(() => [
                   createVNode(_component_CNavbarNav, null, {
@@ -1378,11 +1380,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               createVNode(_component_CNavbarToggler, {
                 "aria-label": "Toggle navigation",
                 "aria-expanded": "{visible}",
-                onClick: _cache[7] || (_cache[7] = ($event) => $data.visible = !$data.visible)
+                onClick: _cache[7] || (_cache[7] = ($event) => $setup.visible = !$setup.visible)
               }),
               createVNode(_component_CCollapse, {
                 class: "navbar-collapse",
-                visible: $data.visible
+                visible: $setup.visible
               }, {
                 default: withCtx(() => [
                   createVNode(_component_CNavbarBrand, { href: "#" }, {
@@ -1484,11 +1486,11 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               createVNode(_component_CNavbarToggler, {
                 "aria-label": "Toggle navigation",
                 "aria-expanded": "{visible}",
-                onClick: _cache[8] || (_cache[8] = ($event) => $data.visible = !$data.visible)
+                onClick: _cache[8] || (_cache[8] = ($event) => $setup.visible = !$setup.visible)
               }),
               createVNode(_component_CCollapse, {
                 class: "navbar-collapse",
-                visible: $data.visible
+                visible: $setup.visible
               }, {
                 default: withCtx(() => [
                   createVNode(_component_CNavbarNav, { class: "me-auto mb-2 mb-lg-0" }, {
@@ -1578,7 +1580,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               createVNode(_component_CNavbarToggler, {
                 "aria-label": "Toggle navigation",
                 "aria-expanded": "{visible}",
-                onClick: _cache[9] || (_cache[9] = ($event) => $data.visible = !$data.visible)
+                onClick: _cache[9] || (_cache[9] = ($event) => $setup.visible = !$setup.visible)
               }),
               createVNode(_component_CNavbarBrand, { href: "#" }, {
                 default: withCtx(() => [
@@ -1588,7 +1590,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               }),
               createVNode(_component_CCollapse, {
                 class: "navbar-collapse",
-                visible: $data.visible
+                visible: $setup.visible
               }, {
                 default: withCtx(() => [
                   createVNode(_component_CNavbarNav, { class: "me-auto mb-2 mb-lg-0" }, {
@@ -1669,7 +1671,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     createBaseVNode("div", _hoisted_87, [
       createVNode(_component_CCollapse, {
         id: "navbarToggleExternalContent",
-        visible: $data.visibleExternalContent,
+        visible: $setup.visibleExternalContent,
         "data-coreui-theme": "dark"
       }, {
         default: withCtx(() => [
@@ -1687,7 +1689,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               createVNode(_component_CNavbarToggler, {
                 "aria-controls": "navbarToggleExternalContent",
                 "aria-label": "Toggle navigation",
-                onClick: _cache[10] || (_cache[10] = ($event) => $data.visibleExternalContent = !$data.visibleExternalContent)
+                onClick: _cache[10] || (_cache[10] = ($event) => $setup.visibleExternalContent = !$setup.visibleExternalContent)
               })
             ]),
             _: 1
@@ -1714,13 +1716,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               createVNode(_component_CNavbarToggler, {
                 "aria-controls": "offcanvasNavbar",
                 "aria-label": "Toggle navigation",
-                onClick: _cache[11] || (_cache[11] = ($event) => $data.visibleOffcanvas = !$data.visibleOffcanvas)
+                onClick: _cache[11] || (_cache[11] = ($event) => $setup.visibleOffcanvas = !$setup.visibleOffcanvas)
               }),
               createVNode(_component_COffcanvas, {
                 id: "offcanvasNavbar",
                 placement: "end",
-                visible: $data.visibleOffcanvas,
-                onHide: _cache[13] || (_cache[13] = ($event) => $data.visibleOffcanvas = false)
+                visible: $setup.visibleOffcanvas,
+                onHide: _cache[13] || (_cache[13] = ($event) => $setup.visibleOffcanvas = false)
               }, {
                 default: withCtx(() => [
                   createVNode(_component_COffcanvasHeader, null, {
@@ -1733,7 +1735,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                       }),
                       createVNode(_component_CCloseButton, {
                         class: "text-reset",
-                        onClick: _cache[12] || (_cache[12] = ($event) => $data.visibleOffcanvas = false)
+                        onClick: _cache[12] || (_cache[12] = ($event) => $setup.visibleOffcanvas = false)
                       })
                     ]),
                     _: 1
@@ -1874,13 +1876,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
               createVNode(_component_CNavbarToggler, {
                 "aria-controls": "offcanvasNavbar2",
                 "aria-label": "Toggle navigation",
-                onClick: _cache[14] || (_cache[14] = ($event) => $data.visibleOffcanvas2 = !$data.visibleOffcanvas2)
+                onClick: _cache[14] || (_cache[14] = ($event) => $setup.visibleOffcanvas2 = !$setup.visibleOffcanvas2)
               }),
               createVNode(_component_COffcanvas, {
                 id: "offcanvasNavbar2",
                 placement: "end",
-                visible: $data.visibleOffcanvas2,
-                onHide: _cache[16] || (_cache[16] = ($event) => $data.visibleOffcanvas2 = false)
+                visible: $setup.visibleOffcanvas2,
+                onHide: _cache[16] || (_cache[16] = ($event) => $setup.visibleOffcanvas2 = false)
               }, {
                 default: withCtx(() => [
                   createVNode(_component_COffcanvasHeader, null, {
@@ -1893,7 +1895,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                       }),
                       createVNode(_component_CCloseButton, {
                         class: "text-reset",
-                        onClick: _cache[15] || (_cache[15] = ($event) => $data.visibleOffcanvas2 = false)
+                        onClick: _cache[15] || (_cache[15] = ($event) => $setup.visibleOffcanvas2 = false)
                       })
                     ]),
                     _: 1
diff --git a/vue/docs/assets/navs-tabs.html-BwFsuHAs.js b/vue/docs/assets/navs-tabs.html-R9_id4Dp.js
similarity index 75%
rename from vue/docs/assets/navs-tabs.html-BwFsuHAs.js
rename to vue/docs/assets/navs-tabs.html-R9_id4Dp.js
index 2c131cdeb7b..653f8558be9 100644
--- a/vue/docs/assets/navs-tabs.html-BwFsuHAs.js
+++ b/vue/docs/assets/navs-tabs.html-R9_id4Dp.js
@@ -1,10 +1,13 @@
-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";
+import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {
-  data() {
-    return {
-      tabPaneActiveKey: 1,
-      tabPanePillsActiveKey: 1
-    };
+  __name: "navs-tabs.html",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const tabPaneActiveKey = ref(1);
+    const tabPanePillsActiveKey = ref(1);
+    const __returned__ = { tabPaneActiveKey, tabPanePillsActiveKey, ref };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 };
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
@@ -14,8 +17,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Base nav "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#base-nav",
-    "aria-hidden": "true"
+    href: "#base-nav"
   }, "#")
 ], -1);
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
@@ -31,35 +33,35 @@ const _hoisted_3 = /* @__PURE__ */ createBaseVNode("p", null, [
 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>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-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_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">#</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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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">#</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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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>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 class="token keyword">const</span> tabPaneActiveKey <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">1</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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-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-highlighter="prismjs" data-ext="vue" data-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_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>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 class="token keyword">const</span> tabPanePillsActiveKey <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">1</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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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 +72,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-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);
+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">#</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">#</a></h3>', 3);
+const _hoisted_78 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cnav" tabindex="-1">CNav <a class="anchor-link" href="#cnav">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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");
@@ -925,9 +927,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             default: withCtx(() => [
               createVNode(_component_CNavLink, {
                 href: "javascript:void(0);",
-                active: $data.tabPaneActiveKey === 1,
+                active: $setup.tabPaneActiveKey === 1,
                 onClick: _cache[0] || (_cache[0] = () => {
-                  $data.tabPaneActiveKey = 1;
+                  $setup.tabPaneActiveKey = 1;
                 })
               }, {
                 default: withCtx(() => [
@@ -942,9 +944,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             default: withCtx(() => [
               createVNode(_component_CNavLink, {
                 href: "javascript:void(0);",
-                active: $data.tabPaneActiveKey === 2,
+                active: $setup.tabPaneActiveKey === 2,
                 onClick: _cache[1] || (_cache[1] = () => {
-                  $data.tabPaneActiveKey = 2;
+                  $setup.tabPaneActiveKey = 2;
                 })
               }, {
                 default: withCtx(() => [
@@ -959,9 +961,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             default: withCtx(() => [
               createVNode(_component_CNavLink, {
                 href: "javascript:void(0);",
-                active: $data.tabPaneActiveKey === 3,
+                active: $setup.tabPaneActiveKey === 3,
                 onClick: _cache[2] || (_cache[2] = () => {
-                  $data.tabPaneActiveKey = 3;
+                  $setup.tabPaneActiveKey = 3;
                 })
               }, {
                 default: withCtx(() => [
@@ -980,7 +982,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           createVNode(_component_CTabPane, {
             role: "tabpanel",
             "aria-labelledby": "home-tab",
-            visible: $data.tabPaneActiveKey === 1
+            visible: $setup.tabPaneActiveKey === 1
           }, {
             default: withCtx(() => [
               createTextVNode(" Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. ")
@@ -990,7 +992,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           createVNode(_component_CTabPane, {
             role: "tabpanel",
             "aria-labelledby": "profile-tab",
-            visible: $data.tabPaneActiveKey === 2
+            visible: $setup.tabPaneActiveKey === 2
           }, {
             default: withCtx(() => [
               createTextVNode(" Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park. ")
@@ -1000,7 +1002,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           createVNode(_component_CTabPane, {
             role: "tabpanel",
             "aria-labelledby": "contact-tab",
-            visible: $data.tabPaneActiveKey === 3
+            visible: $setup.tabPaneActiveKey === 3
           }, {
             default: withCtx(() => [
               createTextVNode(" Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr. ")
@@ -1022,9 +1024,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             default: withCtx(() => [
               createVNode(_component_CNavLink, {
                 href: "javascript:void(0);",
-                active: $data.tabPanePillsActiveKey === 1,
+                active: $setup.tabPanePillsActiveKey === 1,
                 onClick: _cache[3] || (_cache[3] = () => {
-                  $data.tabPanePillsActiveKey = 1;
+                  $setup.tabPanePillsActiveKey = 1;
                 })
               }, {
                 default: withCtx(() => [
@@ -1039,9 +1041,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             default: withCtx(() => [
               createVNode(_component_CNavLink, {
                 href: "javascript:void(0);",
-                active: $data.tabPanePillsActiveKey === 2,
+                active: $setup.tabPanePillsActiveKey === 2,
                 onClick: _cache[4] || (_cache[4] = () => {
-                  $data.tabPanePillsActiveKey = 2;
+                  $setup.tabPanePillsActiveKey = 2;
                 })
               }, {
                 default: withCtx(() => [
@@ -1056,9 +1058,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             default: withCtx(() => [
               createVNode(_component_CNavLink, {
                 href: "javascript:void(0);",
-                active: $data.tabPanePillsActiveKey === 3,
+                active: $setup.tabPanePillsActiveKey === 3,
                 onClick: _cache[5] || (_cache[5] = () => {
-                  $data.tabPanePillsActiveKey = 3;
+                  $setup.tabPanePillsActiveKey = 3;
                 })
               }, {
                 default: withCtx(() => [
@@ -1077,7 +1079,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           createVNode(_component_CTabPane, {
             role: "tabpanel",
             "aria-labelledby": "home-tab",
-            visible: $data.tabPanePillsActiveKey === 1
+            visible: $setup.tabPanePillsActiveKey === 1
           }, {
             default: withCtx(() => [
               createTextVNode(" Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui. ")
@@ -1087,7 +1089,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           createVNode(_component_CTabPane, {
             role: "tabpanel",
             "aria-labelledby": "profile-tab",
-            visible: $data.tabPanePillsActiveKey === 2
+            visible: $setup.tabPanePillsActiveKey === 2
           }, {
             default: withCtx(() => [
               createTextVNode(" Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park. ")
@@ -1097,7 +1099,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           createVNode(_component_CTabPane, {
             role: "tabpanel",
             "aria-labelledby": "contact-tab",
-            visible: $data.tabPanePillsActiveKey === 3
+            visible: $setup.tabPanePillsActiveKey === 3
           }, {
             default: withCtx(() => [
               createTextVNode(" Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr. ")
diff --git a/vue/docs/assets/offcanvas.html-CuZ5zSJ3.js b/vue/docs/assets/offcanvas.html-CuZ5zSJ3.js
new file mode 100644
index 00000000000..e47ebf791e9
--- /dev/null
+++ b/vue/docs/assets/offcanvas.html-CuZ5zSJ3.js
@@ -0,0 +1,571 @@
+import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main = {
+  __name: "offcanvas.html",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const visible = ref(false);
+    const visibleTop = ref(false);
+    const visibleEnd = ref(false);
+    const visibleBottom = ref(false);
+    const visibleScrolling = ref(false);
+    const visibleResponsiveBackdrop = ref(false);
+    const visibleWithStaticBackdrop = ref(false);
+    const visibleWithBothOptions = ref(false);
+    const __returned__ = { visible, visibleTop, visibleEnd, visibleBottom, visibleScrolling, visibleResponsiveBackdrop, visibleWithStaticBackdrop, visibleWithBothOptions, ref };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+};
+const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
+  id: "examples",
+  tabindex: "-1"
+}, [
+  /* @__PURE__ */ createTextVNode("Examples "),
+  /* @__PURE__ */ createBaseVNode("a", {
+    class: "anchor-link",
+    href: "#examples"
+  }, "#")
+], -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"
+  }, "#")
+], -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>template</span><span class="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">: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 class="token tag"><span 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></div><h3 id="live-demo" tabindex="-1">Live demo <a class="anchor-link" href="#live-demo">#</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>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 class="token keyword">const</span> visible <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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>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 class="token keyword">const</span> visible <span class="token operator">=</span> <span class="token function">ref</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 keyword">const</span> visibleScrolling <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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>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 class="token keyword">const</span> visibleWithBothOptions <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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>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 class="token keyword">const</span> visibleWithStaticBackdrop <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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">#</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>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 class="token keyword">const</span> visibleResponsiveBackdrop <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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>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 class="token keyword">const</span> visibleTop <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-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>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 class="token keyword">const</span> visibleEnd <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-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>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 class="token keyword">const</span> visibleBottom <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token boolean">false</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>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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">#</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">#</a></h3>', 3);
+const _hoisted_55 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="coffcanvas" tabindex="-1">COffcanvas <a class="anchor-link" href="#coffcanvas">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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] = () => {
+          $setup.visible = !$setup.visible;
+        })
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Toggle offcanvas")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_COffcanvas, {
+        placement: "start",
+        visible: $setup.visible,
+        onHide: _cache[2] || (_cache[2] = () => {
+          $setup.visible = !$setup.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] = () => {
+                  $setup.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] = () => {
+          $setup.visibleScrolling = !$setup.visibleScrolling;
+        })
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Enable body scrolling")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_COffcanvas, {
+        backdrop: false,
+        placement: "start",
+        scroll: "",
+        visible: $setup.visibleScrolling,
+        onHide: _cache[5] || (_cache[5] = () => {
+          $setup.visibleScrolling = !$setup.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] = () => {
+                  $setup.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] = () => {
+          $setup.visibleWithBothOptions = !$setup.visibleWithBothOptions;
+        })
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Enable both scrolling & backdrop")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_COffcanvas, {
+        placement: "start",
+        scroll: "",
+        visible: $setup.visibleWithBothOptions,
+        onHide: _cache[8] || (_cache[8] = () => {
+          $setup.visibleWithBothOptions = !$setup.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] = () => {
+                  $setup.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] = () => {
+          $setup.visibleWithStaticBackdrop = !$setup.visibleWithStaticBackdrop;
+        })
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Toggle static offcanvas")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_COffcanvas, {
+        backdrop: "static",
+        placement: "start",
+        visible: $setup.visibleWithStaticBackdrop,
+        onHide: _cache[11] || (_cache[11] = () => {
+          $setup.visibleWithStaticBackdrop = !$setup.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] = () => {
+                  $setup.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] = () => {
+          $setup.visibleResponsiveBackdrop = !$setup.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: $setup.visibleResponsiveBackdrop,
+        onHide: _cache[14] || (_cache[14] = () => {
+          $setup.visibleResponsiveBackdrop = !$setup.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] = () => {
+                  $setup.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] = () => {
+          $setup.visibleTop = !$setup.visibleTop;
+        })
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Toggle top offcanvas")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_COffcanvas, {
+        placement: "top",
+        visible: $setup.visibleTop,
+        onHide: _cache[17] || (_cache[17] = () => {
+          $setup.visibleTop = !$setup.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] = () => {
+                  $setup.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] = () => {
+          $setup.visibleEnd = !$setup.visibleEnd;
+        })
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Toggle right offcanvas")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_COffcanvas, {
+        placement: "end",
+        visible: $setup.visibleEnd,
+        onHide: _cache[20] || (_cache[20] = () => {
+          $setup.visibleEnd = !$setup.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] = () => {
+                  $setup.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] = () => {
+          $setup.visibleBottom = !$setup.visibleBottom;
+        })
+      }, {
+        default: withCtx(() => [
+          createTextVNode("Toggle bottom offcanvas")
+        ]),
+        _: 1
+      }),
+      createVNode(_component_COffcanvas, {
+        placement: "bottom",
+        visible: $setup.visibleBottom,
+        onHide: _cache[23] || (_cache[23] = () => {
+          $setup.visibleBottom = !$setup.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] = () => {
+                  $setup.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-D6TxFWNe.js b/vue/docs/assets/offcanvas.html-D6TxFWNe.js
deleted file mode 100644
index 61daa910671..00000000000
--- a/vue/docs/assets/offcanvas.html-D6TxFWNe.js
+++ /dev/null
@@ -1,570 +0,0 @@
-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/options.html-B9kdngTZ.js b/vue/docs/assets/options.html-Oj00yCyN.js
similarity index 99%
rename from vue/docs/assets/options.html-B9kdngTZ.js
rename to vue/docs/assets/options.html-Oj00yCyN.js
index cb3347c344d..2aa0a5973b3 100644
--- a/vue/docs/assets/options.html-B9kdngTZ.js
+++ b/vue/docs/assets/options.html-Oj00yCyN.js
@@ -1,4 +1,4 @@
-import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-BoHWg5jI.js";
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.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-DEHhVOWL.js b/vue/docs/assets/overview.html-D68slxn-.js
similarity index 91%
rename from vue/docs/assets/overview.html-DEHhVOWL.js
rename to vue/docs/assets/overview.html-D68slxn-.js
index 003d40730c5..297de54e435 100644
--- a/vue/docs/assets/overview.html-DEHhVOWL.js
+++ b/vue/docs/assets/overview.html-D68slxn-.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "overview",
@@ -7,8 +7,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Overview "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#overview",
-    "aria-hidden": "true"
+    href: "#overview"
   }, "#")
 ], -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);
@@ -25,12 +24,12 @@ const _hoisted_4 = /* @__PURE__ */ createBaseVNode("p", null, "Here’s a quick
 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_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">#</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_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">#</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);
diff --git a/vue/docs/assets/pagination.html-BlNq3AJ1.js b/vue/docs/assets/pagination.html-B6kiDLSr.js
similarity index 85%
rename from vue/docs/assets/pagination.html-BlNq3AJ1.js
rename to vue/docs/assets/pagination.html-B6kiDLSr.js
index 5e9abe122c1..2cbec6dfc50 100644
--- a/vue/docs/assets/pagination.html-BlNq3AJ1.js
+++ b/vue/docs/assets/pagination.html-B6kiDLSr.js
@@ -1,26 +1,26 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, a as createStaticVNode, f as createTextVNode } from "./app-DGOUrGv-.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_1 = /* @__PURE__ */ createStaticVNode('<h2 id="overview" tabindex="-1">Overview <a class="anchor-link" href="#overview">#</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_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">#</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_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">#</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_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">#</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_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">#</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);
+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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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">#</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">#</a></h3>', 3);
+const _hoisted_37 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cpagination" tabindex="-1">CPagination <a class="anchor-link" href="#cpagination">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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");
diff --git a/vue/docs/assets/placeholder.html-BBrpG9kK.js b/vue/docs/assets/placeholder.html-BZpO7heW.js
similarity index 89%
rename from vue/docs/assets/placeholder.html-BBrpG9kK.js
rename to vue/docs/assets/placeholder.html-BZpO7heW.js
index 0cbdb74a0ab..cf156f17044 100644
--- a/vue/docs/assets/placeholder.html-BBrpG9kK.js
+++ b/vue/docs/assets/placeholder.html-BZpO7heW.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, X as resolveDirective, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, Y as withDirectives, f as createTextVNode, a as createStaticVNode, V as createBlock } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "about",
@@ -7,8 +7,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("About "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#about",
-    "aria-hidden": "true"
+    href: "#about"
   }, "#")
 ], -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);
@@ -19,8 +18,7 @@ const _hoisted_3 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Example "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#example",
-    "aria-hidden": "true"
+    href: "#example"
   }, "#")
 ], -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);
@@ -33,7 +31,7 @@ const _hoisted_9 = /* @__PURE__ */ createBaseVNode("rect", {
   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_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">#</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);
@@ -46,8 +44,7 @@ const _hoisted_19 = /* @__PURE__ */ createBaseVNode("h3", {
   /* @__PURE__ */ createTextVNode("Width "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#width",
-    "aria-hidden": "true"
+    href: "#width"
   }, "#")
 ], -1);
 const _hoisted_20 = /* @__PURE__ */ createBaseVNode("p", null, [
@@ -56,13 +53,13 @@ const _hoisted_20 = /* @__PURE__ */ createBaseVNode("p", null, [
   /* @__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_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">#</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_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">#</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_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">#</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);
+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">#</a></h2><h3 id="cplaceholder" tabindex="-1">CPlaceholder <a class="anchor-link" href="#cplaceholder">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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");
diff --git a/vue/docs/assets/popover.html-CcictLyq.js b/vue/docs/assets/popover.html-DDOrxn8Z.js
similarity index 69%
rename from vue/docs/assets/popover.html-CcictLyq.js
rename to vue/docs/assets/popover.html-DDOrxn8Z.js
index 4cae395f5c6..7ced087d8ab 100644
--- a/vue/docs/assets/popover.html-CcictLyq.js
+++ b/vue/docs/assets/popover.html-DDOrxn8Z.js
@@ -1,16 +1,19 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, X as resolveDirective, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, Y as withDirectives, V as createBlock, f as createTextVNode, a as createStaticVNode, Z as mergeProps, $ as toHandlers } from "./app-DGOUrGv-.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"
-      }
+  __name: "popover.html",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const customPopoverStyle = {
+      "--cui-popover-max-width": "200px",
+      "--cui-popover-border-color": "var(--cui-primary)",
+      "--cui-popover-header-bg": "var(--cui-primary)",
+      "--cui-popover-header-color": "var(--cui-white)",
+      "--cui-popover-body-padding-x": "1rem",
+      "--cui-popover-body-padding-y": ".5rem"
     };
+    const __returned__ = { customPopoverStyle };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 };
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
@@ -20,8 +23,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Example "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#example",
-    "aria-hidden": "true"
+    href: "#example"
   }, "#")
 ], -1);
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("h3", {
@@ -31,25 +33,24 @@ const _hoisted_2 = /* @__PURE__ */ createBaseVNode("h3", {
   /* @__PURE__ */ createTextVNode("Component "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#component",
-    "aria-hidden": "true"
+    href: "#component"
   }, "#")
 ], -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_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">#</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_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">#</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">#</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_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">#</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_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">#</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_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>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> customPopoverStyle <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></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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</a></h2><h3 id="disabled-elements" tabindex="-1">Disabled elements <a class="anchor-link" href="#disabled-elements">#</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);
+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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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">#</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">#</a></h3>', 3);
+const _hoisted_33 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cpopover" tabindex="-1">CPopover <a class="anchor-link" href="#cpopover">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">5.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">#</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");
@@ -205,7 +206,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         content: "This popover is themed via CSS variables.",
         placement: "right",
         title: "Custom popover",
-        style: normalizeStyle($data.customPopoverStyle)
+        style: $setup.customPopoverStyle
       }, {
         toggler: withCtx(({ id, on }) => [
           createVNode(_component_CButton, mergeProps({
@@ -219,7 +220,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           }, 1040, ["aria-describedby"])
         ]),
         _: 1
-      }, 8, ["style"])
+      })
     ]),
     _hoisted_19,
     createBaseVNode("div", _hoisted_24, [
diff --git a/vue/docs/assets/progress.html-DAixQyXt.js b/vue/docs/assets/progress.html-DhAMxmt8.js
similarity index 87%
rename from vue/docs/assets/progress.html-DAixQyXt.js
rename to vue/docs/assets/progress.html-DhAMxmt8.js
index d62721d3e24..ad639c9cd4b 100644
--- a/vue/docs/assets/progress.html-DAixQyXt.js
+++ b/vue/docs/assets/progress.html-DhAMxmt8.js
@@ -1,30 +1,30 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.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_1 = /* @__PURE__ */ createStaticVNode('<h2 id="example" tabindex="-1">Example <a class="anchor-link" href="#example">#</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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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">#</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">#</a></h3>', 3);
+const _hoisted_50 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cprogress" tabindex="-1">CProgress <a class="anchor-link" href="#cprogress">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</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-highlighter="prismjs" data-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);
+const _hoisted_67 = /* @__PURE__ */ createStaticVNode('<h3 id="cprogressbar" tabindex="-1">CProgressBar <a class="anchor-link" href="#cprogressbar">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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-cF7KwA9W.js b/vue/docs/assets/radio.html-DdZZGITP.js
similarity index 70%
rename from vue/docs/assets/radio.html-cF7KwA9W.js
rename to vue/docs/assets/radio.html-DdZZGITP.js
index c1d9028cb02..d992a63c5aa 100644
--- a/vue/docs/assets/radio.html-cF7KwA9W.js
+++ b/vue/docs/assets/radio.html-DdZZGITP.js
@@ -1,32 +1,34 @@
-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";
+import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, t as toDisplayString, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {
-  setup() {
+  __name: "radio.html",
+  setup(__props, { expose: __expose }) {
+    __expose();
     const picked = ref("Four");
-    return {
-      picked
-    };
+    const __returned__ = { picked, ref };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 };
-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_1 = /* @__PURE__ */ createStaticVNode('<h2 id="approach" tabindex="-1">Approach <a class="anchor-link" href="#approach">#</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">#</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_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">#</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_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>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 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></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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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_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">#</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_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">#</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_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">#</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_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">#</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_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">#</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_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">#</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);
+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">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables">#</a></h3>', 3);
+const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cformcheck" tabindex="-1">CFormCheck <a class="anchor-link" href="#cformcheck">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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");
diff --git a/vue/docs/assets/range.html-DLE7qJRM.js b/vue/docs/assets/range.html-DnftQdHW.js
similarity index 70%
rename from vue/docs/assets/range.html-DLE7qJRM.js
rename to vue/docs/assets/range.html-DnftQdHW.js
index b7e1503e602..ac43d30cf99 100644
--- a/vue/docs/assets/range.html-DLE7qJRM.js
+++ b/vue/docs/assets/range.html-DnftQdHW.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "overview",
@@ -7,8 +7,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Overview "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#overview",
-    "aria-hidden": "true"
+    href: "#overview"
   }, "#")
 ], -1);
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
@@ -19,14 +18,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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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);
+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">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables">#</a></h3>', 3);
+const _hoisted_19 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cformrange" tabindex="-1">CFormRange <a class="anchor-link" href="#cformrange">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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-DDgDjKeh.js
similarity index 87%
rename from vue/docs/assets/rating.html-COUjsjjF.js
rename to vue/docs/assets/rating.html-DDgDjKeh.js
index 5667d84c3ec..04ef9b7dba1 100644
--- a/vue/docs/assets/rating.html-COUjsjjF.js
+++ b/vue/docs/assets/rating.html-DDgDjKeh.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, t as toDisplayString, e as withCtx, V as createBlock, W as createCommentVNode, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.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'/>"];
@@ -69,49 +69,48 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("How to use Vue Rating Component. "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#how-to-use-vue-rating-component",
-    "aria-hidden": "true"
+    href: "#how-to-use-vue-rating-component"
   }, "#")
 ], -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_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">#</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_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">#</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_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">#</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_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">#</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_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">#</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_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">#</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_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">#</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_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">#</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_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">#</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_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">#</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_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">#</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);
+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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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">#</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">#</a></h3>', 3);
+const _hoisted_71 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="crating" tabindex="-1">CRating <a class="anchor-link" href="#crating">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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");
diff --git a/vue/docs/assets/sass.html-DHfDOQ32.js b/vue/docs/assets/sass.html-DHfDOQ32.js
deleted file mode 100644
index 2ffac2cea1a..00000000000
--- a/vue/docs/assets/sass.html-DHfDOQ32.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-QPkiTP49.js b/vue/docs/assets/sass.html-QPkiTP49.js
new file mode 100644
index 00000000000..cfb72287767
--- /dev/null
+++ b/vue/docs/assets/sass.html-QPkiTP49.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</a></h2><h3 id="colors" tabindex="-1">Colors <a class="anchor-link" href="#colors">#</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">#</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">#</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">#</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">#</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">#</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/select.html-CGOG4_GI.js b/vue/docs/assets/select.html-HAuQZbve.js
similarity index 84%
rename from vue/docs/assets/select.html-CGOG4_GI.js
rename to vue/docs/assets/select.html-HAuQZbve.js
index e250003fd19..62277dc14af 100644
--- a/vue/docs/assets/select.html-CGOG4_GI.js
+++ b/vue/docs/assets/select.html-HAuQZbve.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "default",
@@ -7,12 +7,11 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Default "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#default",
-    "aria-hidden": "true"
+    href: "#default"
   }, "#")
 ], -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>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_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">#</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);
@@ -34,14 +33,14 @@ const _hoisted_25 = /* @__PURE__ */ createBaseVNode("option", null, "Open this s
 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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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);
+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">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables">#</a></h3>', 3);
+const _hoisted_40 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cformselect" tabindex="-1">CFormSelect <a class="anchor-link" href="#cformselect">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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-HHDGOOYC-BQImv-dR.js b/vue/docs/assets/setupDevtools-HHDGOOYC-8SYwYjCZ.js
similarity index 97%
rename from vue/docs/assets/setupDevtools-HHDGOOYC-BQImv-dR.js
rename to vue/docs/assets/setupDevtools-HHDGOOYC-8SYwYjCZ.js
index e1ff5125a34..e6d7b5a93ff 100644
--- a/vue/docs/assets/setupDevtools-HHDGOOYC-BQImv-dR.js
+++ b/vue/docs/assets/setupDevtools-HHDGOOYC-8SYwYjCZ.js
@@ -1,4 +1,4 @@
-import { s as setupDevtoolsPlugin, w as watch } from "./app-BoHWg5jI.js";
+import { s as setupDevtoolsPlugin, w as watch } from "./app-DGOUrGv-.js";
 var PLUGIN_ID = "org.vuejs.vuepress";
 var PLUGIN_LABEL = "VuePress";
 var PLUGIN_COMPONENT_STATE_TYPE = PLUGIN_LABEL;
diff --git a/vue/docs/assets/sidebar.html-CrmBFQhh.js b/vue/docs/assets/sidebar.html-sk3JAtdU.js
similarity index 92%
rename from vue/docs/assets/sidebar.html-CrmBFQhh.js
rename to vue/docs/assets/sidebar.html-sk3JAtdU.js
index 524ceeccc1c..4b68606cce6 100644
--- a/vue/docs/assets/sidebar.html-CrmBFQhh.js
+++ b/vue/docs/assets/sidebar.html-sk3JAtdU.js
@@ -1,6 +1,6 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, a as createStaticVNode, f as createTextVNode } from "./app-DGOUrGv-.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_1 = /* @__PURE__ */ createStaticVNode('<h2 id="supported-content" tabindex="-1">Supported content <a class="anchor-link" href="#supported-content">#</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">#</a></h2><h3 id="sidebar-component" tabindex="-1">Sidebar component <a class="anchor-link" href="#sidebar-component">#</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" };
 const _hoisted_8 = /* @__PURE__ */ createBaseVNode("span", { class: "nav-icon" }, [
   /* @__PURE__ */ createBaseVNode("span", { class: "nav-icon-bullet" })
@@ -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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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);
+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">#</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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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">#</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">#</a></h3>', 3);
+const _hoisted_42 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="csidebar" tabindex="-1">CSidebar <a class="anchor-link" href="#csidebar">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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-CYqfH6pM.js b/vue/docs/assets/smart-pagination.html-C0KPe66-.js
similarity index 66%
rename from vue/docs/assets/smart-pagination.html-CYqfH6pM.js
rename to vue/docs/assets/smart-pagination.html-C0KPe66-.js
index 5fa8bd51664..2a57aec8fe8 100644
--- a/vue/docs/assets/smart-pagination.html-CYqfH6pM.js
+++ b/vue/docs/assets/smart-pagination.html-C0KPe66-.js
@@ -1,16 +1,16 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, a as createStaticVNode } from "./app-DGOUrGv-.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_1 = /* @__PURE__ */ createStaticVNode('<h2 id="overview" tabindex="-1">Overview <a class="anchor-link" href="#overview">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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);
+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">#</a></h2><h3 id="csmartpagination" tabindex="-1">CSmartPagination <a class="anchor-link" href="#csmartpagination">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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-DMqyM7wC.js b/vue/docs/assets/smart-table.html-CuXPF5Vb.js
similarity index 52%
rename from vue/docs/assets/smart-table.html-DMqyM7wC.js
rename to vue/docs/assets/smart-table.html-CuXPF5Vb.js
index d6c66a7147c..97def961e5f 100644
--- a/vue/docs/assets/smart-table.html-DMqyM7wC.js
+++ b/vue/docs/assets/smart-table.html-CuXPF5Vb.js
@@ -1,4 +1,541 @@
-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";
+import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, V as createBlock, e as withCtx, b as createBaseVNode, d as createVNode, f as createTextVNode, t as toDisplayString, c as createElementBlock, F as Fragment, h as renderList, a0 as defineComponent, a1 as h$1, w as watch, a2 as cloneVNode, a3 as createPopper, i as onMounted, a4 as onUnmounted, a5 as onUpdated, a6 as nextTick, a7 as inject, a8 as computed, a9 as provide, aa as onBeforeUnmount, a as createStaticVNode } from "./app-DGOUrGv-.js";
+const _sfc_main$8 = {
+  __name: "BasicUsage",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const details = ref([]);
+    const columns = [
+      {
+        key: "avatar",
+        label: "",
+        filter: false,
+        sorter: false
+      },
+      {
+        key: "name",
+        _style: { width: "20%" }
+      },
+      "registered",
+      {
+        key: "role",
+        _style: { width: "20%" }
+      },
+      {
+        key: "status",
+        _style: { width: "20%" }
+      },
+      {
+        key: "show_details",
+        label: "",
+        _style: { width: "1%" },
+        filter: false,
+        sorter: false
+      }
+    ];
+    const items = [
+      {
+        id: 1,
+        name: "Samppa Nori",
+        avatar: "1.jpg",
+        registered: "2022/01/01",
+        role: "Member",
+        status: "Active"
+      },
+      {
+        id: 2,
+        name: "Estavan Lykos",
+        avatar: "2.jpg",
+        registered: "2022/02/07",
+        role: "Staff",
+        status: "Banned"
+      },
+      {
+        id: 3,
+        name: "Chetan Mohamed",
+        avatar: "3.jpg",
+        registered: "2022/02/07",
+        role: "Admin",
+        status: "Inactive",
+        _selected: true
+      },
+      {
+        id: 4,
+        name: "Derick Maximinus",
+        avatar: "4.jpg",
+        registered: "2022/03/19",
+        role: "Member",
+        status: "Pending"
+      },
+      {
+        id: 5,
+        name: "Friderik Dávid",
+        avatar: "5.jpg",
+        registered: "2022/01/21",
+        role: "Staff",
+        status: "Active"
+      },
+      {
+        id: 6,
+        name: "Yiorgos Avraamu",
+        avatar: "6.jpg",
+        registered: "2022/01/01",
+        role: "Member",
+        status: "Active"
+      },
+      {
+        id: 7,
+        name: "Avram Tarasios",
+        avatar: "7.jpg",
+        registered: "2022/02/07",
+        role: "Staff",
+        status: "Banned",
+        _selected: true
+      },
+      {
+        id: 8,
+        name: "Quintin Ed",
+        avatar: "8.jpg",
+        registered: "2022/02/07",
+        role: "Admin",
+        status: "Inactive"
+      },
+      {
+        id: 9,
+        name: "Enéas Kwadwo",
+        avatar: "9.jpg",
+        registered: "2022/03/19",
+        role: "Member",
+        status: "Pending"
+      },
+      {
+        id: 10,
+        name: "Agapetus Tadeáš",
+        avatar: "10.jpg",
+        registered: "2022/01/21",
+        role: "Staff",
+        status: "Active"
+      },
+      {
+        id: 11,
+        name: "Carwyn Fachtna",
+        avatar: "11.jpg",
+        registered: "2022/01/01",
+        role: "Member",
+        status: "Active"
+      },
+      {
+        id: 12,
+        name: "Nehemiah Tatius",
+        avatar: "12.jpg",
+        registered: "2022/02/07",
+        role: "Staff",
+        status: "Banned",
+        _selected: true
+      },
+      {
+        id: 13,
+        name: "Ebbe Gemariah",
+        avatar: "13.jpg",
+        registered: "2022/02/07",
+        role: "Admin",
+        status: "Inactive"
+      },
+      {
+        id: 14,
+        name: "Eustorgios Amulius",
+        avatar: "14.jpg",
+        registered: "2022/03/19",
+        role: "Member",
+        status: "Pending"
+      },
+      {
+        id: 15,
+        name: "Leopold Gáspár",
+        avatar: "15.jpg",
+        registered: "2022/01/21",
+        role: "Staff",
+        status: "Active"
+      }
+    ];
+    const getBadge = (status) => {
+      switch (status) {
+        case "Active":
+          return "success";
+        case "Inactive":
+          return "secondary";
+        case "Pending":
+          return "warning";
+        case "Banned":
+          return "danger";
+      }
+    };
+    const toggleDetails = (item) => {
+      if (details.value.includes(item._id)) {
+        details.value = details.value.filter((_item) => _item !== item._id);
+        return;
+      }
+      details.value.push(item._id);
+    };
+    const __returned__ = { details, columns, items, getBadge, toggleDetails, ref };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+};
+const _hoisted_1$1 = { class: "py-2" };
+const _hoisted_2 = { class: "text-muted" };
+function _sfc_render$8(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CAvatar = resolveComponent("CAvatar");
+  const _component_CBadge = resolveComponent("CBadge");
+  const _component_CButton = resolveComponent("CButton");
+  const _component_CCardBody = resolveComponent("CCardBody");
+  const _component_CCollapse = resolveComponent("CCollapse");
+  const _component_CSmartTable = resolveComponent("CSmartTable");
+  return openBlock(), createBlock(_component_CSmartTable, {
+    clickableRows: "",
+    tableProps: {
+      striped: true,
+      hover: true
+    },
+    activePage: 2,
+    footer: "",
+    header: "",
+    items: $setup.items,
+    columns: $setup.columns,
+    columnFilter: "",
+    tableFilter: "",
+    cleaner: "",
+    itemsPerPageSelect: "",
+    itemsPerPage: 5,
+    columnSorter: "",
+    sorterValue: { column: "status", state: "asc" },
+    pagination: ""
+  }, {
+    avatar: withCtx(({ item }) => [
+      createBaseVNode("td", null, [
+        createVNode(_component_CAvatar, {
+          src: _ctx.$withBase(`/images/avatars/${item.avatar}`)
+        }, null, 8, ["src"])
+      ])
+    ]),
+    status: withCtx(({ item }) => [
+      createBaseVNode("td", null, [
+        createVNode(_component_CBadge, {
+          color: $setup.getBadge(item.status)
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(item.status), 1)
+          ]),
+          _: 2
+        }, 1032, ["color"])
+      ])
+    ]),
+    show_details: withCtx(({ item, index }) => [
+      createBaseVNode("td", _hoisted_1$1, [
+        createVNode(_component_CButton, {
+          color: "primary",
+          variant: "outline",
+          square: "",
+          size: "sm",
+          onClick: ($event) => $setup.toggleDetails(item, index)
+        }, {
+          default: withCtx(() => [
+            createTextVNode(toDisplayString(Boolean(item._toggled) ? "Hide" : "Show"), 1)
+          ]),
+          _: 2
+        }, 1032, ["onClick"])
+      ])
+    ]),
+    details: withCtx(({ item }) => [
+      createVNode(_component_CCollapse, {
+        visible: $setup.details.includes(item._id)
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_CCardBody, null, {
+            default: withCtx(() => [
+              createBaseVNode("h4", null, toDisplayString(item.username), 1),
+              createBaseVNode("p", _hoisted_2, "User since: " + toDisplayString(item.registered), 1),
+              createVNode(_component_CButton, {
+                size: "sm",
+                color: "info",
+                class: ""
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(" User Settings ")
+                ]),
+                _: 1
+              }),
+              createVNode(_component_CButton, {
+                size: "sm",
+                color: "danger",
+                class: "ml-1"
+              }, {
+                default: withCtx(() => [
+                  createTextVNode(" Delete ")
+                ]),
+                _: 1
+              })
+            ]),
+            _: 2
+          }, 1024)
+        ]),
+        _: 2
+      }, 1032, ["visible"])
+    ]),
+    _: 1
+  });
+}
+const BasicUsage = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["render", _sfc_render$8], ["__file", "BasicUsage.vue"]]);
+const _sfc_main$7 = {
+  __name: "ColumnNames",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const items = [
+      { name: "John Doe", registered: "2018/01/01", role: "Guest", status: "Pending" },
+      {
+        name: "Samppa Nori",
+        registered: "2018/01/01",
+        role: "Member",
+        status: "Active",
+        _props: { color: "primary", align: "middle" }
+      },
+      {
+        name: "Estavan Lykos",
+        registered: "2018/02/01",
+        role: "Staff",
+        status: "Banned",
+        _cellProps: { all: { class: "fw-semibold" }, name: { color: "info" } }
+      },
+      { name: "Chetan Mohamed", registered: "2018/02/01", role: "Admin", status: "Inactive" },
+      { name: "Derick Maximinus", registered: "2018/03/01", role: "Member", status: "Pending" },
+      { name: "Friderik Dávid", registered: "2018/01/21", role: "Staff", status: "Active" },
+      { name: "Yiorgos Avraamu", registered: "2018/01/01", role: "Member", status: "Active" },
+      {
+        name: "Avram Tarasios",
+        registered: "2018/02/01",
+        role: "Staff",
+        status: "Banned",
+        _props: { color: "warning", align: "middle" }
+      },
+      { name: "Quintin Ed", registered: "2018/02/01", role: "Admin", status: "Inactive" },
+      { name: "Enéas Kwadwo", registered: "2018/03/01", role: "Member", status: "Pending" },
+      { name: "Agapetus Tadeáš", registered: "2018/01/21", role: "Staff", status: "Active" },
+      { name: "Carwyn Fachtna", registered: "2018/01/01", role: "Member", status: "Active" },
+      { name: "Nehemiah Tatius", registered: "2018/02/01", role: "Staff", status: "Banned" },
+      { name: "Ebbe Gemariah", registered: "2018/02/01", role: "Admin", status: "Inactive" },
+      { name: "Eustorgios Amulius", registered: "2018/03/01", role: "Member", status: "Pending" },
+      { name: "Leopold Gáspár", registered: "2018/01/21", role: "Staff", status: "Active" },
+      { name: "Pompeius René", registered: "2018/01/01", role: "Member", status: "Active" },
+      { name: "Paĉjo Jadon", registered: "2018/02/01", role: "Staff", status: "Banned" },
+      { name: "Micheal Mercurius", registered: "2018/02/01", role: "Admin", status: "Inactive" },
+      { name: "Ganesha Dubhghall", registered: "2018/03/01", role: "Member", status: "Pending" },
+      { name: "Hiroto Šimun", registered: "2018/01/21", role: "Staff", status: "Active" },
+      { name: "Vishnu Serghei", registered: "2018/01/01", role: "Member", status: "Active" },
+      { name: "Zbyněk Phoibos", registered: "2018/02/01", role: "Staff", status: "Banned" },
+      { name: "Aulus Agmundr", registered: "2018/01/01", role: "Member", status: "Pending" },
+      { name: "Ford Prefect", registered: "2001/05/25", role: "Alien", status: "Don't panic!" }
+    ];
+    const __returned__ = { items };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+};
+function _sfc_render$7(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CSmartTable = resolveComponent("CSmartTable");
+  return openBlock(), createBlock(_component_CSmartTable, {
+    items: $setup.items,
+    columnFilter: "",
+    columnSorter: "",
+    pagination: "",
+    tableProps: {
+      hover: true
+    }
+  });
+}
+const ColumnNames = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["render", _sfc_render$7], ["__file", "ColumnNames.vue"]]);
+const _sfc_main$6 = {
+  __name: "ColumnGroups",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const columns = [
+      {
+        group: "Group 1",
+        children: [
+          {
+            group: "Subgroup 1",
+            children: [
+              {
+                group: "Subgroup 1A",
+                children: [
+                  {
+                    key: "name",
+                    _style: { width: "20%" }
+                  },
+                  "registered"
+                ]
+              },
+              {
+                group: "Subgroup 1B",
+                children: [{ key: "role", _style: { width: "20%" } }]
+              }
+            ]
+          },
+          {
+            group: "Subgroup 2",
+            children: [
+              {
+                group: "Subgroup 2A",
+                children: [{ key: "status", _style: { width: "20%" } }]
+              }
+            ]
+          }
+        ]
+      }
+    ];
+    const items = [
+      {
+        id: 0,
+        name: "John Doe",
+        registered: "2022/01/01",
+        role: "Guest",
+        status: "Pending"
+      },
+      {
+        id: 1,
+        name: "Samppa Nori",
+        registered: "2022/01/01",
+        role: "Member",
+        status: "Active"
+      },
+      {
+        id: 2,
+        name: "Estavan Lykos",
+        role: "Staff",
+        status: "Banned",
+        _cellProps: { name: { colSpan: 2 } }
+      },
+      {
+        id: 3,
+        name: "Chetan Mohamed",
+        registered: "2022/02/07",
+        role: "Admin",
+        status: "Inactive"
+      },
+      {
+        id: 4,
+        name: "Derick Maximinus",
+        registered: "2022/03/19",
+        role: "Member",
+        status: "Pending"
+      },
+      {
+        id: 5,
+        name: "Friderik Dávid",
+        registered: "2022/01/21",
+        role: "Staff",
+        status: "Active"
+      }
+    ];
+    const __returned__ = { columns, items };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+};
+function _sfc_render$6(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CSmartTable = resolveComponent("CSmartTable");
+  return openBlock(), createBlock(_component_CSmartTable, {
+    columns: $setup.columns,
+    columnSorter: "",
+    footer: "",
+    items: $setup.items,
+    tableHeadProps: { color: "light" },
+    tableProps: { bordered: true }
+  });
+}
+const ColumnGroups = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["render", _sfc_render$6], ["__file", "ColumnGroups.vue"]]);
+const _sfc_main$5 = {
+  __name: "TableWithHeadersSpanningMultipleRowsOrColumns",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const columnsColumnGroupsExample2 = [
+      {
+        group: "Poster availability",
+        _props: { colSpan: 5 },
+        children: [
+          {
+            key: "poster",
+            label: "Poster name",
+            _props: { scope: "col" }
+          },
+          {
+            key: "color",
+            _props: { scope: "col" }
+          },
+          {
+            key: "size",
+            label: "Sizes available",
+            _props: { colSpan: 3, scope: "colgroup" },
+            _style: { width: "50%" }
+          }
+        ]
+      }
+    ];
+    const itemsColumnGroupsExample2 = [
+      {
+        poster: "Zodiac",
+        color: "Full color",
+        size: ["A2", "A3", "A4"],
+        _cellProps: {
+          color: { color: "light", scope: "row" },
+          poster: { color: "light", rowSpan: 3, scope: "rowgroup" }
+        }
+      },
+      {
+        color: "Black and white",
+        size: ["A1", "A2", "A3"],
+        _cellProps: { color: { color: "light", scope: "row" } }
+      },
+      {
+        color: "Sepia",
+        size: ["A3", "A4", "A5"],
+        _cellProps: { color: { color: "light", scope: "row" } }
+      },
+      {
+        poster: "Angels",
+        color: "Black and white",
+        size: ["A1", "A3", "A4"],
+        _cellProps: {
+          color: { color: "light", scope: "row" },
+          poster: { color: "light", rowSpan: 2, scope: "rowgroup" }
+        }
+      },
+      {
+        color: "Sepia",
+        size: ["A2", "A3", "A5"],
+        _cellProps: { color: { color: "light", scope: "row" } }
+      }
+    ];
+    const __returned__ = { columnsColumnGroupsExample2, itemsColumnGroupsExample2 };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+};
+function _sfc_render$5(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CSmartTable = resolveComponent("CSmartTable");
+  return openBlock(), createBlock(_component_CSmartTable, {
+    columns: $setup.columnsColumnGroupsExample2,
+    items: $setup.itemsColumnGroupsExample2,
+    tableHeadProps: { color: "light" },
+    tableProps: { bordered: true }
+  }, {
+    size: withCtx(({ item }) => [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(item.size, (_item) => {
+        return openBlock(), createElementBlock("td", null, toDisplayString(_item), 1);
+      }), 256))
+    ]),
+    _: 1
+  });
+}
+const TableWithHeadersSpanningMultipleRowsOrColumns = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["render", _sfc_render$5], ["__file", "TableWithHeadersSpanningMultipleRowsOrColumns.vue"]]);
 const CCloseButton = defineComponent({
   name: "CCloseButton",
   props: {
@@ -4953,928 +5490,520 @@ defineComponent({
     ]));
   }
 });
-const _sfc_main = {
-  data() {
-    return {
-      columns: [
-        {
-          key: "avatar",
-          label: "",
-          filter: false,
-          sorter: false
-        },
-        {
-          key: "name",
-          _style: { width: "20%" }
-        },
-        "registered",
-        {
-          key: "role",
-          _style: { width: "20%" }
-        },
-        {
-          key: "status",
-          _style: { width: "20%" }
-        },
-        {
-          key: "show_details",
-          label: "",
-          _style: { width: "1%" },
-          filter: false,
-          sorter: false
-        }
-      ],
-      details: [],
-      items: [
-        {
-          id: 1,
-          name: "Samppa Nori",
-          avatar: "1.jpg",
-          registered: "2022/01/01",
-          role: "Member",
-          status: "Active"
-        },
-        {
-          id: 2,
-          name: "Estavan Lykos",
-          avatar: "2.jpg",
-          registered: "2022/02/07",
-          role: "Staff",
-          status: "Banned"
-        },
-        {
-          id: 3,
-          name: "Chetan Mohamed",
-          avatar: "3.jpg",
-          registered: "2022/02/07",
-          role: "Admin",
-          status: "Inactive",
-          _selected: true
-        },
-        {
-          id: 4,
-          name: "Derick Maximinus",
-          avatar: "4.jpg",
-          registered: "2022/03/19",
-          role: "Member",
-          status: "Pending"
-        },
-        {
-          id: 5,
-          name: "Friderik Dávid",
-          avatar: "5.jpg",
-          registered: "2022/01/21",
-          role: "Staff",
-          status: "Active"
-        },
-        {
-          id: 6,
-          name: "Yiorgos Avraamu",
-          avatar: "6.jpg",
-          registered: "2022/01/01",
-          role: "Member",
-          status: "Active"
-        },
-        {
-          id: 7,
-          name: "Avram Tarasios",
-          avatar: "7.jpg",
-          registered: "2022/02/07",
-          role: "Staff",
-          status: "Banned",
-          _selected: true
-        },
-        {
-          id: 8,
-          name: "Quintin Ed",
-          avatar: "8.jpg",
-          registered: "2022/02/07",
-          role: "Admin",
-          status: "Inactive"
-        },
-        {
-          id: 9,
-          name: "Enéas Kwadwo",
-          avatar: "9.jpg",
-          registered: "2022/03/19",
-          role: "Member",
-          status: "Pending"
-        },
-        {
-          id: 10,
-          name: "Agapetus Tadeáš",
-          avatar: "10.jpg",
-          registered: "2022/01/21",
-          role: "Staff",
-          status: "Active"
-        },
-        {
-          id: 11,
-          name: "Carwyn Fachtna",
-          avatar: "11.jpg",
-          registered: "2022/01/01",
-          role: "Member",
-          status: "Active"
-        },
-        {
-          id: 12,
-          name: "Nehemiah Tatius",
-          avatar: "12.jpg",
-          registered: "2022/02/07",
-          role: "Staff",
-          status: "Banned",
-          _selected: true
-        },
-        {
-          id: 13,
-          name: "Ebbe Gemariah",
-          avatar: "13.jpg",
-          registered: "2022/02/07",
-          role: "Admin",
-          status: "Inactive"
-        },
-        {
-          id: 14,
-          name: "Eustorgios Amulius",
-          avatar: "14.jpg",
-          registered: "2022/03/19",
-          role: "Member",
-          status: "Pending"
-        },
-        {
-          id: 15,
-          name: "Leopold Gáspár",
-          avatar: "15.jpg",
-          registered: "2022/01/21",
-          role: "Staff",
-          status: "Active"
-        }
-      ],
-      columnsColumnGroupsExample: [
-        {
-          group: "Group 1",
-          children: [
-            {
-              group: "Subgroup 1",
-              children: [
-                {
-                  group: "Subgroup 1A",
-                  children: [
-                    {
-                      key: "name",
-                      _style: { width: "20%" }
-                    },
-                    "registered"
-                  ]
-                },
-                {
-                  group: "Subgroup 1B",
-                  children: [
-                    { key: "role", _style: { width: "20%" } }
-                  ]
+const _sfc_main$4 = {
+  __name: "CustomFiltersDateRangePicker",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const startDate = ref(/* @__PURE__ */ new Date("2022-01-21"));
+    const endDate = ref(/* @__PURE__ */ new Date("2022-02-07"));
+    const columns = [
+      {
+        key: "name",
+        _style: { width: "50%" }
+      },
+      {
+        key: "registered",
+        _style: { width: "50%" },
+        filter: (onChange) => {
+          return h$1(CDateRangePicker, {
+            size: "sm",
+            startDate: startDate.value,
+            endDate: endDate.value,
+            minDate: minDate.value,
+            maxDate: maxDate.value,
+            onStartDateChange: (date) => {
+              startDate.value = date;
+              onChange((item) => {
+                if (date) {
+                  const itemDate = new Date(Date.parse(item));
+                  return endDate.value ? itemDate >= date && itemDate <= endDate.value : itemDate >= date;
                 }
-              ]
+                return true;
+              });
             },
-            {
-              group: "Subgroup 2",
-              children: [
-                {
-                  group: "Subgroup 2A",
-                  children: [
-                    { key: "status", _style: { width: "20%" } }
-                  ]
+            onEndDateChange: (date) => {
+              endDate.value = date;
+              onChange((item) => {
+                if (date) {
+                  const itemDate = new Date(Date.parse(item));
+                  return startDate.value ? itemDate <= date && itemDate >= startDate.value : itemDate <= date;
                 }
-              ]
-            }
-          ]
-        }
-      ],
-      itemsColumnGroupsExample: [
-        {
-          id: 0,
-          name: "John Doe",
-          registered: "2022/01/01",
-          role: "Guest",
-          status: "Pending"
-        },
-        {
-          id: 1,
-          name: "Samppa Nori",
-          registered: "2022/01/01",
-          role: "Member",
-          status: "Active"
-        },
-        {
-          id: 2,
-          name: "Estavan Lykos",
-          role: "Staff",
-          status: "Banned",
-          _cellProps: { name: { colSpan: 2 } }
-        },
-        {
-          id: 3,
-          name: "Chetan Mohamed",
-          registered: "2022/02/07",
-          role: "Admin",
-          status: "Inactive"
-        },
-        {
-          id: 4,
-          name: "Derick Maximinus",
-          registered: "2022/03/19",
-          role: "Member",
-          status: "Pending"
-        },
-        {
-          id: 5,
-          name: "Friderik Dávid",
-          registered: "2022/01/21",
-          role: "Staff",
-          status: "Active"
-        }
-      ],
-      columnsColumnGroupsExample2: [
-        {
-          group: "Poster availability",
-          _props: { colSpan: 5 },
-          children: [
-            {
-              key: "poster",
-              label: "Poster name",
-              _props: { scope: "col" }
-            },
-            {
-              key: "color",
-              _props: { scope: "col" }
-            },
-            {
-              key: "size",
-              label: "Sizes available",
-              _props: { colSpan: 3, scope: "colgroup" },
-              _style: { width: "50%" }
+                return true;
+              });
             }
-          ]
+          });
         }
-      ],
-      itemsColumnGroupsExample2: [
-        {
-          poster: "Zodiac",
-          color: "Full color",
-          size: ["A2", "A3", "A4"],
-          _cellProps: {
-            color: { color: "light", scope: "row" },
-            poster: { color: "light", rowSpan: 3, scope: "rowgroup" }
-          }
-        },
-        {
-          color: "Black and white",
-          size: ["A1", "A2", "A3"],
-          _cellProps: { color: { color: "light", scope: "row" } }
-        },
-        {
-          color: "Sepia",
-          size: ["A3", "A4", "A5"],
-          _cellProps: { color: { color: "light", scope: "row" } }
-        },
-        {
-          poster: "Angels",
-          color: "Black and white",
-          size: ["A1", "A3", "A4"],
-          _cellProps: {
-            color: { color: "light", scope: "row" },
-            poster: { color: "light", rowSpan: 2, scope: "rowgroup" }
-          }
-        },
-        {
-          color: "Sepia",
-          size: ["A2", "A3", "A5"],
-          _cellProps: { color: { color: "light", scope: "row" } }
-        }
-      ],
-      itemsDateRangePicker: [
-        { id: 0, name: "John Doe", registered: "2022/01/01" },
-        {
-          id: 1,
-          name: "Samppa Nori",
-          registered: "2022/01/01"
-        },
-        {
-          id: 2,
-          name: "Estavan Lykos",
-          registered: "2022/02/07"
-        },
-        { id: 3, name: "Chetan Mohamed", registered: "2022/02/07" },
-        {
-          id: 4,
-          name: "Derick Maximinus",
-          registered: "2022/03/19"
-        },
-        { id: 5, name: "Friderik Dávid", registered: "2022/01/21" },
-        { id: 6, name: "Yiorgos Avraamu", registered: "2022/01/01" },
-        {
-          id: 7,
-          name: "Avram Tarasios",
-          registered: "2022/02/07"
-        },
-        { id: 8, name: "Quintin Ed", registered: "2022/02/07" },
-        { id: 9, name: "Enéas Kwadwo", registered: "2022/02/19", role: "Member", status: "Pending" },
-        { id: 10, name: "Agapetus Tadeáš", registered: "2022/01/21" },
-        { id: 11, name: "Carwyn Fachtna", registered: "2022/01/01" },
-        { id: 12, name: "Nehemiah Tatius", registered: "2022/02/07" },
-        { id: 13, name: "Ebbe Gemariah", registered: "2022/02/07" },
-        {
-          id: 14,
-          name: "Eustorgios Amulius",
-          registered: "2022/02/19"
-        },
-        { id: 15, name: "Leopold Gáspár", registered: "2022/01/21" },
-        { id: 16, name: "Pompeius René", registered: "2022/01/01" },
-        { id: 17, name: "Paĉjo Jadon", registered: "2022/02/07" },
-        {
-          id: 18,
-          name: "Micheal Mercurius",
-          registered: "2022/02/07"
-        },
-        {
-          id: 19,
-          name: "Ganesha Dubhghall",
-          registered: "2022/01/19"
-        },
-        { id: 20, name: "Hiroto Šimun", registered: "2022/01/21" },
-        { id: 21, name: "Vishnu Serghei", registered: "2022/01/01" },
-        { id: 22, name: "Zbyněk Phoibos", registered: "2022/02/07" },
-        {
-          id: 23,
-          name: "Aulus Agmundr",
-          registered: "2022/01/01"
-        },
-        {
-          id: 42,
-          name: "Ford Prefect",
-          registered: "2022/02/25"
-        }
-      ],
-      startDate: /* @__PURE__ */ new Date("2022-01-21"),
-      endDate: /* @__PURE__ */ new Date("2022-02-07"),
-      columnsDateRangePicker: [
-        {
-          key: "name",
-          _style: { width: "50%" }
-        },
-        {
-          key: "registered",
-          _style: { width: "50%" },
-          filter: (values, onChange) => {
-            [...new Set(values)].sort();
-            return h$1(CDateRangePicker, {
-              size: "sm",
-              startDate: this.startDate,
-              endDate: this.endDate,
-              minDate: this.minDate,
-              maxDate: this.maxDate,
-              onStartDateChange: (date) => {
-                this.setStartDate(date);
-                onChange((item) => {
-                  if (date) {
-                    const itemDate = new Date(Date.parse(item));
-                    return this.endDate ? itemDate >= date && itemDate <= this.endDate : itemDate >= date;
-                  }
-                  return true;
-                });
-              },
-              onEndDateChange: (date) => {
-                this.setEndDate(date);
-                onChange((item) => {
-                  if (date) {
-                    const itemDate = new Date(Date.parse(item));
-                    return this.startDate ? itemDate <= date && itemDate >= this.startDate : itemDate <= date;
-                  }
-                  return true;
-                });
-              }
-            });
-          }
-        }
-      ],
-      columnsMultiSelect: [
-        {
-          key: "name",
-          _style: { width: "50%" }
-        },
-        {
-          key: "role",
-          _style: { width: "50%" },
-          filter: (values, onChange) => {
-            const unique = [...new Set(values)].sort();
-            return h$1(CMultiSelect, {
-              size: "sm",
-              onChange: (selected) => {
-                const _selected = selected.map((element) => element.value);
-                onChange(function(item) {
-                  return Array.isArray(_selected) && _selected.length ? _selected.includes(item.toLowerCase()) : true;
-                });
-              },
-              options: unique.map((element) => {
-                return {
-                  value: element.toLowerCase(),
-                  text: element
-                };
-              })
-            });
-          },
-          sorter: false
-        }
-      ],
-      itemsMultiSelect: [
-        { id: 0, name: "John Doe", role: "Guest" },
-        {
-          id: 1,
-          name: "Samppa Nori",
-          role: "Member"
-        },
-        {
-          id: 2,
-          name: "Estavan Lykos",
-          role: "Staff"
-        },
-        { id: 3, name: "Chetan Mohamed", role: "Admin" },
-        {
-          id: 4,
-          name: "Derick Maximinus",
-          role: "Member"
-        },
-        { id: 5, name: "Friderik Dávid", role: "Staff" },
-        { id: 6, name: "Yiorgos Avraamu", role: "Member" },
-        {
-          id: 7,
-          name: "Avram Tarasios",
-          role: "Staff"
-        },
-        { id: 8, name: "Quintin Ed", role: "Admin" },
-        { id: 9, name: "Enéas Kwadwo", role: "Member" },
-        { id: 10, name: "Agapetus Tadeáš", role: "Staff" },
-        { id: 11, name: "Carwyn Fachtna", role: "Member" },
-        { id: 12, name: "Nehemiah Tatius", role: "Staff" },
-        { id: 13, name: "Ebbe Gemariah", role: "Admin" },
-        {
-          id: 14,
-          name: "Eustorgios Amulius",
-          role: "Member"
-        },
-        { id: 15, name: "Leopold Gáspár", role: "Staff" },
-        { id: 16, name: "Pompeius René", role: "Member" },
-        { id: 17, name: "Paĉjo Jadon", role: "Staff" },
-        {
-          id: 18,
-          name: "Micheal Mercurius",
-          role: "Admin"
-        },
-        {
-          id: 19,
-          name: "Ganesha Dubhghall",
-          role: "Member"
-        },
-        { id: 20, name: "Hiroto Šimun", role: "Staff" },
-        { id: 21, name: "Vishnu Serghei", role: "Member" },
-        { id: 22, name: "Zbyněk Phoibos", role: "Staff" },
-        {
-          id: 23,
-          name: "Aulus Agmundr",
-          role: "Member"
-        },
-        {
-          id: 42,
-          name: "Ford Prefect",
-          role: "Alien"
-        }
-      ],
-      activePage: 3,
-      columnFilter: [],
-      columnSorter: null,
-      itemsPerPage: 10,
-      loading: false,
-      loadingJSON: false,
-      users: [],
-      usersJSON: [],
-      records: [],
-      columnsExternalDataExample: [
-        {
-          key: "first_name",
-          _style: { minWidth: "130px" }
-        },
-        {
-          key: "last_name",
-          _style: { minWidth: "130px" }
-        },
-        "email",
-        {
-          key: "country",
-          _style: { minWidth: "120px" }
-        },
-        {
-          key: "ip_address",
-          label: "IP"
-        }
-      ],
-      columnsJSONDataExample: [
-        {
-          key: "first_name",
-          _style: { minWidth: "130px" }
-        },
-        {
-          key: "last_name",
-          _style: { minWidth: "130px" }
-        },
-        "email",
-        {
-          key: "country",
-          _style: { minWidth: "120px" }
-        },
-        {
-          key: "ip_address",
-          label: "IP"
-        }
-      ]
-    };
-  },
-  computed: {
-    minDate: function() {
-      return new Date(
+      }
+    ];
+    const items = [
+      { id: 0, name: "John Doe", registered: "2022/01/01" },
+      {
+        id: 1,
+        name: "Samppa Nori",
+        registered: "2022/01/01"
+      },
+      {
+        id: 2,
+        name: "Estavan Lykos",
+        registered: "2022/02/07"
+      },
+      { id: 3, name: "Chetan Mohamed", registered: "2022/02/07" },
+      {
+        id: 4,
+        name: "Derick Maximinus",
+        registered: "2022/03/19"
+      },
+      { id: 5, name: "Friderik Dávid", registered: "2022/01/21" },
+      { id: 6, name: "Yiorgos Avraamu", registered: "2022/01/01" },
+      {
+        id: 7,
+        name: "Avram Tarasios",
+        registered: "2022/02/07"
+      },
+      { id: 8, name: "Quintin Ed", registered: "2022/02/07" },
+      {
+        id: 9,
+        name: "Enéas Kwadwo",
+        registered: "2022/02/19",
+        role: "Member",
+        status: "Pending"
+      },
+      { id: 10, name: "Agapetus Tadeáš", registered: "2022/01/21" },
+      { id: 11, name: "Carwyn Fachtna", registered: "2022/01/01" },
+      { id: 12, name: "Nehemiah Tatius", registered: "2022/02/07" },
+      { id: 13, name: "Ebbe Gemariah", registered: "2022/02/07" },
+      {
+        id: 14,
+        name: "Eustorgios Amulius",
+        registered: "2022/02/19"
+      },
+      { id: 15, name: "Leopold Gáspár", registered: "2022/01/21" },
+      { id: 16, name: "Pompeius René", registered: "2022/01/01" },
+      { id: 17, name: "Paĉjo Jadon", registered: "2022/02/07" },
+      {
+        id: 18,
+        name: "Micheal Mercurius",
+        registered: "2022/02/07"
+      },
+      {
+        id: 19,
+        name: "Ganesha Dubhghall",
+        registered: "2022/01/19"
+      },
+      { id: 20, name: "Hiroto Šimun", registered: "2022/01/21" },
+      { id: 21, name: "Vishnu Serghei", registered: "2022/01/01" },
+      { id: 22, name: "Zbyněk Phoibos", registered: "2022/02/07" },
+      {
+        id: 23,
+        name: "Aulus Agmundr",
+        registered: "2022/01/01"
+      },
+      {
+        id: 42,
+        name: "Ford Prefect",
+        registered: "2022/02/25"
+      }
+    ];
+    const minDate = computed(
+      () => new Date(
         Math.min(
-          ...this.itemsDateRangePicker.map((item) => {
+          ...items.map((item) => {
             return new Date(Date.parse(item.registered));
           })
         )
-      );
-    },
-    maxDate: function() {
-      return new Date(
+      )
+    );
+    const maxDate = computed(
+      () => new Date(
         Math.max(
-          ...this.itemsDateRangePicker.map((item) => {
+          ...items.map((item) => {
             return new Date(Date.parse(item.registered));
           })
         )
-      );
-    }
-  },
-  methods: {
-    getBadge(status) {
-      switch (status) {
-        case "Active":
-          return "success";
-        case "Inactive":
-          return "secondary";
-        case "Pending":
-          return "warning";
-        case "Banned":
-          return "danger";
-      }
-    },
-    toggleDetails(item) {
-      if (this.details.includes(item._id)) {
-        this.details = this.details.filter((_item) => _item !== item._id);
-        return;
-      }
-      this.details.push(item._id);
-    },
-    convertToDate(date) {
+      )
+    );
+    const convertToDate = (date) => {
       const _date = new Date(Date.parse(date));
       return _date.toLocaleDateString();
+    };
+    const __returned__ = { startDate, endDate, columns, items, minDate, maxDate, convertToDate, computed, h: h$1, ref, get CDateRangePicker() {
+      return CDateRangePicker;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+};
+function _sfc_render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CSmartTable = resolveComponent("CSmartTable");
+  return openBlock(), createBlock(_component_CSmartTable, {
+    cleaner: "",
+    clickableRows: "",
+    columns: $setup.columns,
+    columnFilter: "",
+    columnFilterValue: {
+      registered: (date) => new Date(Date.parse(date)) >= $setup.startDate && new Date(Date.parse(date)) <= $setup.endDate
     },
-    setStartDate(date) {
-      this.startDate = date;
-    },
-    setEndDate(date) {
-      this.endDate = date;
-    },
-    async getUsers() {
-      const offset = this.itemsPerPage * this.activePage - this.itemsPerPage;
-      let params = new URLSearchParams();
-      Object.keys(this.columnFilter).forEach((key) => {
-        params.append(key, this.columnFilter[key]);
-      });
-      this.columnSorter && this.columnSorter.column !== void 0 && params.append("sort", `${this.columnSorter.column}%${this.columnSorter.state}`);
-      this.setLoading(true);
-      fetch(`https://apitest.coreui.io/demos/users?offset=${offset}&limit=${this.itemsPerPage}&${params}`).then((response) => response.json()).then((result) => {
-        this.setRecords(result.number_of_matching_records);
-        result.number_of_matching_records ? this.setUsers(result.records) : this.setUsers([]);
-        this.setLoading(false);
-      });
-    },
-    async getUsersJSON() {
-      this.setLoadingJSON(true);
-      fetch("https://apitest.coreui.io/fake_data/users.json").then((response) => response.json()).then((result) => {
-        this.setUsersJSON(result);
-        this.setLoadingJSON(false);
+    columnSorter: "",
+    footer: "",
+    items: $setup.items,
+    itemsPerPageSelect: "",
+    itemsPerPage: 10,
+    pagination: "",
+    tableFilter: ""
+  }, {
+    registered: withCtx(({ item }) => [
+      createBaseVNode("td", null, toDisplayString($setup.convertToDate(item.registered)), 1)
+    ]),
+    _: 1
+  }, 8, ["columnFilterValue"]);
+}
+const CustomFiltersDateRangePicker = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["render", _sfc_render$4], ["__file", "CustomFiltersDateRangePicker.vue"]]);
+const _sfc_main$3 = {
+  __name: "CustomFiltersMultiSelect",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const columns = [
+      {
+        key: "name",
+        _style: { width: "50%" }
+      },
+      {
+        key: "role",
+        _style: { width: "50%" },
+        filter: (values, onChange) => {
+          const unique = [...new Set(values)].sort();
+          return h$1(CMultiSelect, {
+            size: "sm",
+            onChange: (selected) => {
+              const _selected = selected.map((element) => element.value);
+              onChange(function(item) {
+                return Array.isArray(_selected) && _selected.length ? _selected.includes(item.toLowerCase()) : true;
+              });
+            },
+            options: unique.map((element) => {
+              return {
+                value: element.toLowerCase(),
+                text: element
+              };
+            })
+          });
+        },
+        sorter: false
+      }
+    ];
+    const items = [
+      { id: 0, name: "John Doe", role: "Guest" },
+      {
+        id: 1,
+        name: "Samppa Nori",
+        role: "Member"
+      },
+      {
+        id: 2,
+        name: "Estavan Lykos",
+        role: "Staff"
+      },
+      { id: 3, name: "Chetan Mohamed", role: "Admin" },
+      {
+        id: 4,
+        name: "Derick Maximinus",
+        role: "Member"
+      },
+      { id: 5, name: "Friderik Dávid", role: "Staff" },
+      { id: 6, name: "Yiorgos Avraamu", role: "Member" },
+      {
+        id: 7,
+        name: "Avram Tarasios",
+        role: "Staff"
+      },
+      { id: 8, name: "Quintin Ed", role: "Admin" },
+      { id: 9, name: "Enéas Kwadwo", role: "Member" },
+      { id: 10, name: "Agapetus Tadeáš", role: "Staff" },
+      { id: 11, name: "Carwyn Fachtna", role: "Member" },
+      { id: 12, name: "Nehemiah Tatius", role: "Staff" },
+      { id: 13, name: "Ebbe Gemariah", role: "Admin" },
+      {
+        id: 14,
+        name: "Eustorgios Amulius",
+        role: "Member"
+      },
+      { id: 15, name: "Leopold Gáspár", role: "Staff" },
+      { id: 16, name: "Pompeius René", role: "Member" },
+      { id: 17, name: "Paĉjo Jadon", role: "Staff" },
+      {
+        id: 18,
+        name: "Micheal Mercurius",
+        role: "Admin"
+      },
+      {
+        id: 19,
+        name: "Ganesha Dubhghall",
+        role: "Member"
+      },
+      { id: 20, name: "Hiroto Šimun", role: "Staff" },
+      { id: 21, name: "Vishnu Serghei", role: "Member" },
+      { id: 22, name: "Zbyněk Phoibos", role: "Staff" },
+      {
+        id: 23,
+        name: "Aulus Agmundr",
+        role: "Member"
+      },
+      {
+        id: 42,
+        name: "Ford Prefect",
+        role: "Alien"
+      }
+    ];
+    const __returned__ = { columns, items, h: h$1, get CMultiSelect() {
+      return CMultiSelect;
+    } };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+};
+function _sfc_render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CSmartTable = resolveComponent("CSmartTable");
+  return openBlock(), createBlock(_component_CSmartTable, {
+    cleaner: "",
+    clickableRows: "",
+    columns: $setup.columns,
+    columnFilter: "",
+    columnSorter: "",
+    footer: "",
+    items: $setup.items,
+    itemsPerPageSelect: "",
+    itemsPerPage: 10,
+    pagination: "",
+    tableFilter: ""
+  });
+}
+const CustomFiltersMultiSelect = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["render", _sfc_render$3], ["__file", "CustomFiltersMultiSelect.vue"]]);
+const _sfc_main$2 = {
+  __name: "DataSourcesExternalData",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const activePage = ref(3);
+    const columnFilter = ref({});
+    const columnSorter = ref(null);
+    const itemsPerPage = ref(10);
+    const loading = ref(false);
+    const records = ref(0);
+    const users = ref([]);
+    const columns = [
+      {
+        key: "first_name",
+        _style: { minWidth: "130px" }
+      },
+      {
+        key: "last_name",
+        _style: { minWidth: "130px" }
+      },
+      "email",
+      {
+        key: "country",
+        _style: { minWidth: "120px" }
+      },
+      {
+        key: "ip_address",
+        label: "IP"
+      }
+    ];
+    const getUsers = async () => {
+      var _a;
+      const offset = itemsPerPage.value * (activePage.value - 1);
+      const params = new URLSearchParams();
+      Object.entries(columnFilter.value).forEach(([key, value]) => {
+        params.append(key, value);
       });
+      if ((_a = columnSorter.value) == null ? void 0 : _a.column) {
+        params.append("sort", `${columnSorter.value.column}%${columnSorter.value.state}`);
+      }
+      loading.value = true;
+      try {
+        const response = await fetch(
+          `https://apitest.coreui.io/demos/users?offset=${offset}&limit=${itemsPerPage.value}&${params.toString()}`
+        );
+        const result = await response.json();
+        records.value = result.number_of_matching_records || 0;
+        users.value = result.records || [];
+      } catch (error) {
+        console.error("Failed to fetch users:", error);
+        users.value = [];
+      } finally {
+        loading.value = false;
+      }
+    };
+    onMounted(() => {
+      getUsers();
+    });
+    watch([activePage, columnFilter, itemsPerPage], getUsers);
+    watch(columnSorter, getUsers, {
+      deep: true
+    });
+    const __returned__ = { activePage, columnFilter, columnSorter, itemsPerPage, loading, records, users, columns, getUsers, onMounted, ref, watch };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+};
+function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CSmartTable = resolveComponent("CSmartTable");
+  return openBlock(), createBlock(_component_CSmartTable, {
+    columns: $setup.columns,
+    columnFilter: { external: true },
+    columnSorter: { external: true },
+    items: $setup.users,
+    itemsPerPage: $setup.itemsPerPage,
+    itemsPerPageSelect: "",
+    loading: $setup.loading,
+    pagination: { external: true },
+    paginationProps: {
+      activePage: $setup.activePage,
+      pages: Math.ceil($setup.records / $setup.itemsPerPage) || 1
     },
-    setActivePage(activePage) {
-      this.activePage = activePage;
-    },
-    setColumnFilter(columnFilter) {
-      this.columnFilter = columnFilter;
-    },
-    setColumnSorter(columnSorter) {
-      this.columnSorter = columnSorter;
-    },
-    setItemsPerPage(itemsPerPage) {
-      this.itemsPerPage = itemsPerPage;
-    },
-    setLoading(loading) {
-      this.loading = loading;
-    },
-    setLoadingJSON(loading) {
-      this.loadingJSON = loading;
-    },
-    setRecords(records) {
-      this.records = records;
-    },
-    setUsers(users) {
-      this.users = users;
-    },
-    setUsersJSON(users) {
-      this.usersJSON = users;
-    }
-  },
-  watch: {
-    activePage() {
-      this.getUsers();
-    },
-    columnFilter() {
-      this.getUsers();
+    tableProps: {
+      hover: true,
+      responsive: true
     },
-    columnSorter: {
-      handler() {
-        this.getUsers();
+    onActivePageChange: _cache[0] || (_cache[0] = (_activePage) => {
+      $setup.activePage = _activePage;
+    }),
+    onColumnFilterChange: _cache[1] || (_cache[1] = (filter) => {
+      $setup.activePage = 1;
+      $setup.columnFilter = filter;
+    }),
+    onItemsPerPageChange: _cache[2] || (_cache[2] = (_itemsPerPage) => {
+      $setup.activePage = 1;
+      $setup.itemsPerPage = _itemsPerPage;
+    }),
+    onSorterChange: _cache[3] || (_cache[3] = (sorter) => {
+      $setup.columnSorter = sorter;
+    })
+  }, null, 8, ["items", "itemsPerPage", "loading", "paginationProps"]);
+}
+const DataSourcesExternalData = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$2], ["__file", "DataSourcesExternalData.vue"]]);
+const _sfc_main$1 = {
+  __name: "DataSourcesJSON",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const loading = ref(false);
+    const users = ref([]);
+    const columns = [
+      {
+        key: "first_name",
+        _style: { minWidth: "130px" }
       },
-      deep: true
-    },
-    itemsPerPage() {
-      this.getUsers();
+      {
+        key: "last_name",
+        _style: { minWidth: "130px" }
+      },
+      "email",
+      {
+        key: "country",
+        _style: { minWidth: "120px" }
+      },
+      {
+        key: "ip_address",
+        label: "IP"
+      }
+    ];
+    const getUsers = async () => {
+      loading.value = true;
+      try {
+        const response = await fetch("https://apitest.coreui.io/fake_data/users.json");
+        const result = await response.json();
+        users.value = result;
+      } catch (error) {
+        console.error("Failed to fetch users:", error);
+      } finally {
+        loading.value = false;
+      }
+    };
+    onMounted(() => {
+      getUsers();
+    });
+    const __returned__ = { loading, users, columns, getUsers, onMounted, ref };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+};
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CSmartTable = resolveComponent("CSmartTable");
+  return openBlock(), createBlock(_component_CSmartTable, {
+    columns: $setup.columns,
+    columnFilter: "",
+    columnSorter: "",
+    items: $setup.users,
+    itemsPerPageSelect: "",
+    loading: $setup.loading,
+    pagination: "",
+    tableProps: {
+      hover: true,
+      responsive: true
     }
-  },
-  mounted() {
-    this.getUsers();
-    this.getUsersJSON();
+  }, null, 8, ["items", "loading"]);
+}
+const DataSourcesJSON = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1], ["__file", "DataSourcesJSON.vue"]]);
+const _sfc_main = {
+  __name: "smart-table.html",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const __returned__ = { BasicUsage, ColumnNames, ColumnGroups, TableWithHeadersSpanningMultipleRowsOrColumns, CustomFiltersDateRangePicker, CustomFiltersMultiSelect, DataSourcesExternalData, DataSourcesJSON };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 };
-const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="features" tabindex="-1">Features <a class="anchor-link" href="#features" aria-hidden="true">#</a></h2><ul><li>Filter items by one or all columns</li><li>Sort items by column</li><li>Integrated with CPagination component by default</li><li>Customize style of specific rows, columns and cells</li><li>Customize display of columns</li><li>Load with initial filters and sorter state</li><li>Loading state visualization</li><li>Default header labels generation based on column names</li></ul><h2 id="basic-usage" tabindex="-1">Basic usage <a class="anchor-link" href="#basic-usage" aria-hidden="true">#</a></h2>', 3);
+const _hoisted_1 = /* @__PURE__ */ createStaticVNode('<h2 id="features" tabindex="-1">Features <a class="anchor-link" href="#features">#</a></h2><ul><li>Filter items by one or all columns</li><li>Sort items by column</li><li>Integrated with CPagination component by default</li><li>Customize style of specific rows, columns and cells</li><li>Customize display of columns</li><li>Load with initial filters and sorter state</li><li>Loading state visualization</li><li>Default header labels generation based on column names</li></ul><h2 id="basic-usage" tabindex="-1">Basic usage <a class="anchor-link" href="#basic-usage">#</a></h2>', 3);
 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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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);
+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>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> details <span class="token operator">=</span> <span class="token function">ref</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">const</span> columns <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 class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="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 class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="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>\n<span class="line"><span class="token keyword">const</span> items <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 class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="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 class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="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 class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="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 class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="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 class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="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 class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="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 class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="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 class="token punctuation">,</span></span>\n<span class="line">  <span class="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> <span class="token function-variable function">getBadge</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">status</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">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>\n<span class="line"></span>\n<span class="line"><span class="token keyword">const</span> <span class="token function-variable function">toggleDetails</span> <span class="token operator">=</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>details<span class="token punctuation">.</span>value<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">    details<span class="token punctuation">.</span>value <span class="token operator">=</span> details<span class="token punctuation">.</span>value<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>\n<span class="line">  details<span class="token punctuation">.</span>value<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>\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>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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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_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>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> items <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>\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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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_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>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> columns <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 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 class="token punctuation">,</span></span>\n<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">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 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 class="token punctuation">,</span></span>\n<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 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> items <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 class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="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 class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</span><span class="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 class="token punctuation">,</span></span>\n<span class="line">  <span class="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 class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="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>columns<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>items<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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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_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>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> columnsColumnGroupsExample2 <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 class="token punctuation">,</span></span>\n<span class="line">  <span class="token punctuation">}</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> itemsColumnGroupsExample2 <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 class="token punctuation">,</span></span>\n<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 class="token punctuation">,</span></span>\n<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>\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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-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">#</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">#</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_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>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> computed<span class="token punctuation">,</span> h<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">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>\n<span class="line"><span class="token keyword">const</span> startDate <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 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 keyword">const</span> endDate <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 string">&#39;2022-02-07&#39;</span><span class="token punctuation">)</span><span class="token punctuation">)</span></span>\n<span class="line"></span>\n<span class="line"><span class="token keyword">const</span> columns <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">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">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> startDate<span class="token punctuation">.</span>value<span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">endDate</span><span class="token operator">:</span> endDate<span class="token punctuation">.</span>value<span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">minDate</span><span class="token operator">:</span> minDate<span class="token punctuation">.</span>value<span class="token punctuation">,</span></span>\n<span class="line">        <span class="token literal-property property">maxDate</span><span class="token operator">:</span> maxDate<span class="token punctuation">.</span>value<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">          startDate<span class="token punctuation">.</span>value <span class="token operator">=</span> date</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> endDate<span class="token punctuation">.</span>value <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> endDate<span class="token punctuation">.</span>value <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">          endDate<span class="token punctuation">.</span>value <span class="token operator">=</span> date</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> startDate<span class="token punctuation">.</span>value</span>\n<span class="line">                <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> startDate<span class="token punctuation">.</span>value</span>\n<span class="line">                <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 class="token punctuation">,</span></span>\n<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>\n<span class="line"><span class="token keyword">const</span> items <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>\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">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 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 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>\n<span class="line"></span>\n<span class="line"><span class="token keyword">const</span> minDate <span class="token operator">=</span> <span class="token function">computed</span><span class="token punctuation">(</span></span>\n<span class="line">  <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</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>\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>items<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 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 function">computed</span><span class="token punctuation">(</span></span>\n<span class="line">  <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</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>\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>items<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 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> <span class="token function-variable function">convertToDate</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">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>\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>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>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">: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: (date) =&gt;</span>\n<span class="line">        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>items<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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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_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>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> 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>\n<span class="line"><span class="token keyword">const</span> columns <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>\n<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">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 keyword">const</span> items <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></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>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>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">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>items<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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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">#</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_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 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> onMounted<span class="token punctuation">,</span> ref<span class="token punctuation">,</span> watch <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> activePage <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> columnFilter <span class="token operator">=</span> <span class="token function">ref</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">const</span> columnSorter <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">)</span></span>\n<span class="line"><span class="token keyword">const</span> itemsPerPage <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token number">10</span><span class="token punctuation">)</span></span>\n<span class="line"><span class="token keyword">const</span> loading <span class="token operator">=</span> <span class="token function">ref</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 keyword">const</span> records <span class="token operator">=</span> <span class="token function">ref</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> users <span class="token operator">=</span> <span class="token function">ref</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>\n<span class="line"><span class="token keyword">const</span> columns <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>\n<span class="line"><span class="token keyword">const</span> <span class="token function-variable function">getUsers</span> <span class="token operator">=</span> <span class="token keyword">async</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">const</span> offset <span class="token operator">=</span> itemsPerPage<span class="token punctuation">.</span>value <span class="token operator">*</span> <span class="token punctuation">(</span>activePage<span class="token punctuation">.</span>value <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">const</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"></span>\n<span class="line">  <span class="token comment">// Append filters to params</span></span>\n<span class="line">  Object<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span>columnFilter<span class="token punctuation">.</span>value<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"><span class="token punctuation">[</span>key<span class="token punctuation">,</span> value<span class="token punctuation">]</span></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> value<span class="token punctuation">)</span></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">// Append sorting to params if available</span></span>\n<span class="line">  <span class="token keyword">if</span> <span class="token punctuation">(</span>columnSorter<span class="token punctuation">.</span>value<span class="token operator">?.</span>column<span class="token punctuation">)</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><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>columnSorter<span class="token punctuation">.</span>value<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>columnSorter<span class="token punctuation">.</span>value<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 punctuation">}</span></span>\n<span class="line"></span>\n<span class="line">  <span class="token comment">// Set loading state</span></span>\n<span class="line">  loading<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">true</span></span>\n<span class="line"></span>\n<span class="line">  <span class="token keyword">try</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <span class="token function">fetch</span><span class="token punctuation">(</span></span>\n<span class="line">      <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>itemsPerPage<span class="token punctuation">.</span>value<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 punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span></span>\n<span class="line">    <span class="token punctuation">)</span></span>\n<span class="line">    <span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">json</span><span class="token punctuation">(</span><span class="token punctuation">)</span></span>\n<span class="line"></span>\n<span class="line">    records<span class="token punctuation">.</span>value <span class="token operator">=</span> result<span class="token punctuation">.</span>number_of_matching_records <span class="token operator">||</span> <span class="token number">0</span></span>\n<span class="line">    users<span class="token punctuation">.</span>value <span class="token operator">=</span> result<span class="token punctuation">.</span>records <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 class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">    console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">&#39;Failed to fetch users:&#39;</span><span class="token punctuation">,</span> error<span class="token punctuation">)</span></span>\n<span class="line">    users<span class="token punctuation">.</span>value <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 class="token keyword">finally</span> <span class="token punctuation">{</span></span>\n<span class="line">    loading<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">false</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>\n<span class="line"><span class="token function">onMounted</span><span class="token punctuation">(</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 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>\n<span class="line"><span class="token function">watch</span><span class="token punctuation">(</span><span class="token punctuation">[</span>activePage<span class="token punctuation">,</span> columnFilter<span class="token punctuation">,</span> itemsPerPage<span class="token punctuation">]</span><span class="token punctuation">,</span> getUsers<span class="token punctuation">)</span></span>\n<span class="line"></span>\n<span class="line"><span class="token function">watch</span><span class="token punctuation">(</span>columnSorter<span class="token punctuation">,</span> getUsers<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 class="token punctuation">,</span></span>\n<span class="line"><span class="token punctuation">}</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>\n<span class="line"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="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>columns<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>{ external: true }<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>{ external: true }<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>{ external: true }<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; {</span>\n<span class="line">      activePage = _activePage</span>\n<span class="line">    }<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">      activePage = 1</span>\n<span class="line">      columnFilter = 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">      activePage = 1</span>\n<span class="line">      itemsPerPage = _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; {</span>\n<span class="line">      columnSorter = sorter</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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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_40 = { class: "docs-example rounded-top p-4" };
+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>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> onMounted<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> loading <span class="token operator">=</span> <span class="token function">ref</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 keyword">const</span> users <span class="token operator">=</span> <span class="token function">ref</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>\n<span class="line"><span class="token keyword">const</span> columns <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>\n<span class="line"><span class="token keyword">const</span> <span class="token function-variable function">getUsers</span> <span class="token operator">=</span> <span class="token keyword">async</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 comment">// Set loading to true to indicate that the data fetching process is starting</span></span>\n<span class="line">  loading<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">true</span></span>\n<span class="line">  </span>\n<span class="line">  <span class="token keyword">try</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token comment">// Make a GET request to fetch the users data from the API</span></span>\n<span class="line">    <span class="token keyword">const</span> response <span class="token operator">=</span> <span class="token keyword">await</span> <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>\n<span class="line">    <span class="token comment">// Parse the JSON response into a JavaScript object</span></span>\n<span class="line">    <span class="token keyword">const</span> result <span class="token operator">=</span> <span class="token keyword">await</span> response<span class="token punctuation">.</span><span class="token function">json</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">// Update the &#39;users&#39; reactive variable with the fetched data</span></span>\n<span class="line">    users<span class="token punctuation">.</span>value <span class="token operator">=</span> result</span>\n<span class="line">  <span class="token punctuation">}</span> <span class="token keyword">catch</span> <span class="token punctuation">(</span>error<span class="token punctuation">)</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token comment">// Log an error message to the console if the fetch fails</span></span>\n<span class="line">    console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">&#39;Failed to fetch users:&#39;</span><span class="token punctuation">,</span> error<span class="token punctuation">)</span></span>\n<span class="line">  <span class="token punctuation">}</span> <span class="token keyword">finally</span> <span class="token punctuation">{</span></span>\n<span class="line">    <span class="token comment">// Set loading to false to indicate that the data fetching process has finished</span></span>\n<span class="line">    loading<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token boolean">false</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>\n<span class="line"></span>\n<span class="line"><span class="token function">onMounted</span><span class="token punctuation">(</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 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></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>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>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">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>users<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>\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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</a></h2><h3 id="csmarttable" tabindex="-1">CSmartTable <a class="anchor-link" href="#csmarttable">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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");
-  const _component_CButton = resolveComponent("CButton");
-  const _component_CCardBody = resolveComponent("CCardBody");
-  const _component_CCollapse = resolveComponent("CCollapse");
-  const _component_CSmartTable = resolveComponent("CSmartTable");
   return openBlock(), createElementBlock("div", null, [
     _hoisted_1,
     createBaseVNode("div", _hoisted_4, [
-      createVNode(_component_CSmartTable, {
-        clickableRows: "",
-        tableProps: {
-          striped: true,
-          hover: true
-        },
-        activePage: 2,
-        footer: "",
-        header: "",
-        items: $data.items,
-        columns: $data.columns,
-        columnFilter: "",
-        tableFilter: "",
-        cleaner: "",
-        itemsPerPageSelect: "",
-        itemsPerPage: 5,
-        columnSorter: "",
-        sorterValue: { column: "status", state: "asc" },
-        selectable: "",
-        pagination: ""
-      }, {
-        avatar: withCtx(({ item }) => [
-          createBaseVNode("td", null, [
-            createVNode(_component_CAvatar, {
-              src: _ctx.$withBase(`/images/avatars/${item.avatar}`)
-            }, null, 8, ["src"])
-          ])
-        ]),
-        status: withCtx(({ item }) => [
-          createBaseVNode("td", null, [
-            createVNode(_component_CBadge, {
-              color: $options.getBadge(item.status)
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString(item.status), 1)
-              ]),
-              _: 2
-            }, 1032, ["color"])
-          ])
-        ]),
-        show_details: withCtx(({ item }) => [
-          createBaseVNode("td", _hoisted_5, [
-            createVNode(_component_CButton, {
-              color: "primary",
-              variant: "outline",
-              square: "",
-              size: "sm",
-              onClick: ($event) => $options.toggleDetails(item)
-            }, {
-              default: withCtx(() => [
-                createTextVNode(toDisplayString($data.details.includes(item._id) ? "Hide" : "Show"), 1)
-              ]),
-              _: 2
-            }, 1032, ["onClick"])
-          ])
-        ]),
-        details: withCtx(({ item }) => [
-          createVNode(_component_CCollapse, {
-            visible: $data.details.includes(item._id)
-          }, {
-            default: withCtx(() => [
-              createVNode(_component_CCardBody, null, {
-                default: withCtx(() => [
-                  createBaseVNode("h4", null, toDisplayString(item.username), 1),
-                  createBaseVNode("p", _hoisted_6, "User since: " + toDisplayString(item.registered), 1),
-                  createVNode(_component_CButton, {
-                    size: "sm",
-                    color: "info",
-                    class: ""
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(" User Settings ")
-                    ]),
-                    _: 1
-                  }),
-                  createVNode(_component_CButton, {
-                    size: "sm",
-                    color: "danger",
-                    class: "ms-1"
-                  }, {
-                    default: withCtx(() => [
-                      createTextVNode(" Delete ")
-                    ]),
-                    _: 1
-                  })
-                ]),
-                _: 2
-              }, 1024)
-            ]),
-            _: 2
-          }, 1032, ["visible"])
-        ]),
-        _: 1
-      }, 8, ["items", "columns"])
+      createVNode($setup["BasicUsage"])
     ]),
-    _hoisted_7,
-    createBaseVNode("div", _hoisted_10, [
-      createVNode(_component_CSmartTable, {
-        items: $data.items,
-        columnFilter: "",
-        columnSorter: "",
-        pagination: "",
-        tableProps: {
-          hover: true
-        }
-      }, null, 8, ["items"])
+    _hoisted_5,
+    createBaseVNode("div", _hoisted_8, [
+      createVNode($setup["ColumnNames"])
     ]),
-    _hoisted_11,
-    createBaseVNode("div", _hoisted_14, [
-      createVNode(_component_CSmartTable, {
-        columns: $data.columnsColumnGroupsExample,
-        columnSorter: "",
-        footer: "",
-        items: $data.itemsColumnGroupsExample,
-        tableHeadProps: { color: "light" },
-        tableProps: { bordered: true }
-      }, null, 8, ["columns", "items"])
+    _hoisted_9,
+    createBaseVNode("div", _hoisted_12, [
+      createVNode($setup["ColumnGroups"])
     ]),
-    _hoisted_15,
-    createBaseVNode("div", _hoisted_18, [
-      createVNode(_component_CSmartTable, {
-        columns: $data.columnsColumnGroupsExample2,
-        items: $data.itemsColumnGroupsExample2,
-        tableHeadProps: { color: "light" },
-        tableProps: { bordered: true }
-      }, {
-        size: withCtx(({ item }) => [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(item.size, (_item) => {
-            return openBlock(), createElementBlock("td", null, toDisplayString(_item), 1);
-          }), 256))
-        ]),
-        _: 1
-      }, 8, ["columns", "items"])
+    _hoisted_13,
+    createBaseVNode("div", _hoisted_16, [
+      createVNode($setup["TableWithHeadersSpanningMultipleRowsOrColumns"])
     ]),
-    _hoisted_19,
-    createBaseVNode("div", _hoisted_26, [
-      createVNode(_component_CSmartTable, {
-        cleaner: "",
-        clickableRows: "",
-        columns: $data.columnsDateRangePicker,
-        columnFilter: "",
-        columnFilterValue: {
-          registered: (date) => new Date(Date.parse(date)) >= $data.startDate && new Date(Date.parse(date)) <= $data.endDate
-        },
-        columnSorter: "",
-        footer: "",
-        items: $data.itemsDateRangePicker,
-        itemsPerPageSelect: "",
-        itemsPerPage: 10,
-        pagination: "",
-        tableFilter: ""
-      }, {
-        registered: withCtx(({ item }) => [
-          createBaseVNode("td", null, toDisplayString($options.convertToDate(item.registered)), 1)
-        ]),
-        _: 1
-      }, 8, ["columns", "columnFilterValue", "items"])
+    _hoisted_17,
+    createBaseVNode("div", _hoisted_24, [
+      createVNode($setup["CustomFiltersDateRangePicker"])
     ]),
-    _hoisted_27,
-    createBaseVNode("div", _hoisted_30, [
-      createVNode(_component_CSmartTable, {
-        cleaner: "",
-        clickableRows: "",
-        columns: $data.columnsMultiSelect,
-        columnFilter: "",
-        columnSorter: "",
-        footer: "",
-        items: $data.itemsMultiSelect,
-        itemsPerPageSelect: "",
-        itemsPerPage: 10,
-        pagination: "",
-        tableFilter: ""
-      }, null, 8, ["columns", "items"])
+    _hoisted_25,
+    createBaseVNode("div", _hoisted_28, [
+      createVNode($setup["CustomFiltersMultiSelect"])
     ]),
-    _hoisted_31,
-    createBaseVNode("div", _hoisted_38, [
-      createVNode(_component_CSmartTable, {
-        columns: $data.columnsExternalDataExample,
-        columnFilter: {
-          external: true
-        },
-        columnSorter: {
-          external: true
-        },
-        items: $data.users,
-        itemsPerPage: $data.itemsPerPage,
-        itemsPerPageSelect: "",
-        loading: $data.loading,
-        pagination: {
-          external: true
-        },
-        paginationProps: {
-          activePage: $data.activePage,
-          pages: Math.ceil($data.records / $data.itemsPerPage) || 1
-        },
-        tableProps: {
-          hover: true,
-          responsive: true
-        },
-        onActivePageChange: _cache[0] || (_cache[0] = (activePage) => $options.setActivePage(activePage)),
-        onColumnFilterChange: _cache[1] || (_cache[1] = (filter) => {
-          $options.setActivePage(1);
-          $options.setColumnFilter(filter);
-        }),
-        onItemsPerPageChange: _cache[2] || (_cache[2] = (itemsPerPage) => {
-          $options.setActivePage(1);
-          $options.setItemsPerPage(itemsPerPage);
-        }),
-        onSorterChange: _cache[3] || (_cache[3] = (sorter) => $options.setColumnSorter(sorter))
-      }, null, 8, ["columns", "items", "itemsPerPage", "loading", "paginationProps"])
+    _hoisted_29,
+    createBaseVNode("div", _hoisted_36, [
+      createVNode($setup["DataSourcesExternalData"])
     ]),
-    _hoisted_39,
-    createBaseVNode("div", _hoisted_42, [
-      createVNode(_component_CSmartTable, {
-        columns: $data.columnsJSONDataExample,
-        columnFilter: "",
-        columnSorter: "",
-        items: $data.usersJSON,
-        itemsPerPageSelect: "",
-        loading: $data.loadingJSON,
-        pagination: "",
-        tableProps: {
-          hover: true,
-          responsive: true
-        }
-      }, null, 8, ["columns", "items", "loading"])
+    _hoisted_37,
+    createBaseVNode("div", _hoisted_40, [
+      createVNode($setup["DataSourcesJSON"])
     ]),
-    _hoisted_43
+    _hoisted_41
   ]);
 }
 const smartTable_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "smart-table.html.vue"]]);
diff --git a/vue/docs/assets/spinner.html-Dja_Ea9Q.js b/vue/docs/assets/spinner.html-CbcVdjbB.js
similarity index 80%
rename from vue/docs/assets/spinner.html-Dja_Ea9Q.js
rename to vue/docs/assets/spinner.html-CbcVdjbB.js
index b82a485449b..b29bf4ba9be 100644
--- a/vue/docs/assets/spinner.html-Dja_Ea9Q.js
+++ b/vue/docs/assets/spinner.html-CbcVdjbB.js
@@ -1,28 +1,28 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, a as createStaticVNode, f as createTextVNode } from "./app-DGOUrGv-.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_1 = /* @__PURE__ */ createStaticVNode('<h2 id="about" tabindex="-1">About <a class="anchor-link" href="#about">#</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">#</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">#</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_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">#</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_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">#</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_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">#</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_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">#</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_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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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);
+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">#</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">#</a></h3>', 3);
+const _hoisted_39 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cspinner" tabindex="-1">CSpinner <a class="anchor-link" href="#cspinner">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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");
diff --git a/vue/docs/assets/style-CM2j93lE.css b/vue/docs/assets/style-V4DqbpUk.css
similarity index 99%
rename from vue/docs/assets/style-CM2j93lE.css
rename to vue/docs/assets/style-V4DqbpUk.css
index ef22fb86129..69a38546ef0 100644
--- a/vue/docs/assets/style-CM2j93lE.css
+++ b/vue/docs/assets/style-V4DqbpUk.css
@@ -1,5 +1,5 @@
 /*!
- * CoreUI PRO  v5.3.0 (https://coreui.io)
+ * CoreUI PRO  v5.4.0 (https://coreui.io)
  * Copyright (c) 2024 creativeLabs Łukasz Holeczek
  * License (https://coreui.io/pro/license/)
  */
@@ -92,7 +92,7 @@ svg.DocSearch-Hit-Select-Icon{display:none}
 .DocSearch-Commands li{align-items:center;display:flex}
 .DocSearch-Commands li:not(:last-of-type){margin-right:.8em}
 .DocSearch-Commands-Key{align-items:center;background:var(--docsearch-key-gradient);border-radius:2px;box-shadow:var(--docsearch-key-shadow);display:flex;height:18px;justify-content:center;margin-right:.4em;padding:0 0 1px;color:var(--docsearch-muted-color);border:0;width:20px}
-.DocSearch-VisuallyHiddenForAccessibility{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}
+.DocSearch-VisuallyHiddenForAccessibility{clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}
 @media (max-width:768px){:root{--docsearch-spacing:10px;--docsearch-footer-height:40px}.DocSearch-Dropdown{height:100%}.DocSearch-Container{height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);position:absolute}.DocSearch-Footer{border-radius:0;bottom:0;position:absolute}.DocSearch-Hit-content-wrapper{display:flex;position:relative;width:80%}.DocSearch-Modal{border-radius:0;box-shadow:none;height:100vh;height:-webkit-fill-available;height:calc(var(--docsearch-vh, 1vh)*100);margin:0;max-width:100%;width:100%}.DocSearch-Dropdown{max-height:calc(var(--docsearch-vh, 1vh)*100 - var(--docsearch-searchbox-height) - var(--docsearch-spacing) - var(--docsearch-footer-height))}.DocSearch-Cancel{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:0;color:var(--docsearch-highlight-color);cursor:pointer;display:inline-block;flex:none;font:inherit;font-size:1em;font-weight:500;margin-left:var(--docsearch-spacing);outline:none;overflow:hidden;padding:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}.DocSearch-Commands,.DocSearch-Hit-Tree{display:none}}
 @keyframes fade-in{0%{opacity:0}to{opacity:1}}
 :root,
@@ -3006,9 +3006,11 @@ select.form-multi-select {
   top: 0;
   left: 0;
   z-index: 2;
+  max-width: 100%;
   height: 100%;
   padding: 1rem 0.75rem;
   overflow: hidden;
+  color: rgba(var(--cui-body-color-rgb), 0.65);
   text-align: start;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -3053,17 +3055,18 @@ select.form-multi-select {
   padding-bottom: 0.625rem;
 }
 .form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
-  color: rgba(var(--cui-body-color-rgb), 0.65);
   transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
 }
 .form-floating > .form-control:focus ~ label,
 .form-floating > .form-control:not(:placeholder-shown) ~ label,
 .form-floating > .form-control-plaintext ~ label,
 .form-floating > .form-select ~ label {
-  color: rgba(var(--cui-body-color-rgb), 0.65);
   transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
 }
-.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after {
+.form-floating > .form-control:-webkit-autofill ~ label {
+  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
+}
+.form-floating > textarea:not(:-moz-placeholder-shown) ~ label::after {
   position: absolute;
   inset: 1rem 0.375rem;
   z-index: -1;
@@ -3072,10 +3075,8 @@ select.form-multi-select {
   background-color: var(--cui-body-bg);
   border-radius: var(--cui-border-radius);
 }
-.form-floating > .form-control:focus ~ label::after,
-.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
-.form-floating > .form-control-plaintext ~ label::after,
-.form-floating > .form-select ~ label::after {
+.form-floating > textarea:focus ~ label::after,
+.form-floating > textarea:not(:placeholder-shown) ~ label::after {
   position: absolute;
   inset: 1rem 0.375rem;
   z-index: -1;
@@ -3084,9 +3085,8 @@ select.form-multi-select {
   background-color: var(--cui-body-bg);
   border-radius: var(--cui-border-radius);
 }
-.form-floating > .form-control:-webkit-autofill ~ label {
-  color: rgba(var(--cui-body-color-rgb), 0.65);
-  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
+.form-floating > textarea:disabled ~ label::after {
+  background-color: var(--cui-secondary-bg);
 }
 .form-floating > .form-control-plaintext ~ label {
   border-width: var(--cui-border-width) 0;
@@ -3095,10 +3095,6 @@ select.form-multi-select {
 .form-floating > .form-control:disabled ~ label {
   color: #6d7d9c;
 }
-.form-floating > :disabled ~ label::after,
-.form-floating > .form-control:disabled ~ label::after {
-  background-color: var(--cui-secondary-bg);
-}
 .input-group {
   position: relative;
   display: flex;
@@ -3213,7 +3209,7 @@ select.form-multi-select {
 .was-validated .form-control:valid, .form-control.is-valid {
   border-color: var(--cui-form-valid-border-color);
   padding-right: calc(1.5em + 0.75rem);
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%231b9e3e' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%231b9e3e' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right calc(0.375em + 0.1875rem) center;
   background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
@@ -3230,7 +3226,7 @@ select.form-multi-select {
   border-color: var(--cui-form-valid-border-color);
 }
 .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
-  --cui-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%231b9e3e' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+  --cui-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%231b9e3e' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e");
   padding-right: 4.125rem;
   background-position: right 0.75rem center, center right 2.25rem;
   background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
@@ -4511,7 +4507,8 @@ select.form-multi-select {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
-.btn-group-vertical > .btn ~ .btn,
+.btn-group-vertical > .btn:nth-child(n+3),
+.btn-group-vertical > :not(.btn-check) + .btn,
 .btn-group-vertical > .btn-group:not(:first-child) > .btn {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
@@ -5278,11 +5275,11 @@ select.form-multi-select {
   --cui-accordion-btn-padding-y: 1rem;
   --cui-accordion-btn-color: var(--cui-body-color);
   --cui-accordion-btn-bg: var(--cui-accordion-bg);
-  --cui-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgba%2837, 43, 54, 0.95%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
+  --cui-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgba%2837, 43, 54, 0.95%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
   --cui-accordion-btn-icon-width: 1.25rem;
   --cui-accordion-btn-icon-transform: rotate(-180deg);
   --cui-accordion-btn-icon-transition: transform 0.2s ease-in-out;
-  --cui-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233634a3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
+  --cui-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233634a3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
   --cui-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(88, 86, 214, 0.25);
   --cui-accordion-body-padding-x: 1.25rem;
   --cui-accordion-body-padding-y: 1rem;
@@ -5387,16 +5384,15 @@ select.form-multi-select {
 .accordion-flush > .accordion-item:last-child {
   border-bottom: 0;
 }
-.accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
-  border-radius: 0;
-}
-.accordion-flush > .accordion-item > .accordion-collapse {
+.accordion-flush > .accordion-item > .accordion-collapse,
+.accordion-flush > .accordion-item > .accordion-header .accordion-button,
+.accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
   border-radius: 0;
 }
 .dark-theme .accordion-button::after,
 [data-coreui-theme=dark] .accordion-button::after {
-  --cui-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba%28255, 255, 255, 0.87%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
-  --cui-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23403f98'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --cui-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba%28255, 255, 255, 0.87%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
+  --cui-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23403f98'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
 }
 .breadcrumb {
   --cui-breadcrumb-padding-x: 0;
@@ -6051,7 +6047,7 @@ select.form-multi-select {
 }
 .btn-close {
   --cui-btn-close-color: #080a0c;
-  --cui-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23080a0c'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
+  --cui-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23080a0c'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
   --cui-btn-close-opacity: 0.5;
   --cui-btn-close-hover-opacity: 0.75;
   --cui-btn-close-focus-shadow: 0 0 0 0.25rem rgba(88, 86, 214, 0.25);
@@ -6804,10 +6800,10 @@ select.form-multi-select {
   } ]
 } */
 .carousel-control-prev-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e");
 }
 .carousel-control-next-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
 }
 .carousel-indicators {
   position: absolute;
@@ -7594,11 +7590,22 @@ select.form-multi-select {
 .calendar.months ~ .time-picker, .calendar.years ~ .time-picker {
   display: none;
 }
+@media (max-width: 575.98px) {
+  .calendar:not(:first-child) .calendar-nav {
+    border-top: var(--cui-calendar-nav-border);
+  }
+}
 .show-week-numbers table {
   width: calc(var(--cui-calendar-table-cell-size) * 8);
 }
 .calendars {
   display: flex;
+  flex-basis: min-content;
+}
+@media (max-width: 575.98px) {
+  .calendars {
+    flex-wrap: wrap;
+  }
 }
 .calendar-nav {
   display: flex;
@@ -8746,9 +8753,9 @@ select.form-multi-select {
   --cui-sidebar-nav-group-items-padding-y: 0;
   --cui-sidebar-nav-group-items-padding-x: 0;
   --cui-sidebar-nav-group-indicator-color: var(--cui-tertiary-color);
-  --cui-sidebar-nav-group-indicator-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --cui-sidebar-nav-group-indicator-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
   --cui-sidebar-nav-group-indicator-hover-color: var(--cui-emphasis-color);
-  --cui-sidebar-nav-group-indicator-hover-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --cui-sidebar-nav-group-indicator-hover-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
   --cui-sidebar-nav-group-toggle-show-color: var(--cui-body-color);
   position: relative;
   display: flex;
@@ -9008,10 +9015,10 @@ select.form-multi-select {
   }
 }
 .sidebar-narrow:not(.sidebar-end) ~ * {
-  --cui-sidebar-occupy-start: 4rem;
+  --cui-sidebar-occupy-start: 4rem !important;
 }
 .sidebar-narrow.sidebar-end ~ * {
-  --cui-sidebar-occupy-end: 4rem;
+  --cui-sidebar-occupy-end: 4rem !important;
 }
 .sidebar-narrow .nav-link {
   overflow: hidden;
@@ -9020,10 +9027,10 @@ select.form-multi-select {
   position: fixed;
 }
 .sidebar-narrow-unfoldable:not(.sidebar-end) ~ * {
-  --cui-sidebar-occupy-start: 4rem;
+  --cui-sidebar-occupy-start: 4rem !important;
 }
 .sidebar-narrow-unfoldable.sidebar-end ~ * {
-  --cui-sidebar-occupy-end: 4rem;
+  --cui-sidebar-occupy-end: 4rem !important;
 }
 .sidebar-narrow-unfoldable:hover {
   box-shadow: 0 0.5rem 1rem rgba(8, 10, 12, 0.15);
@@ -9286,11 +9293,11 @@ select.form-multi-select {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  scrollbar-width: none; /* Firefox */
   background-color: transparent;
   border: 0;
   font-size: var(--cui-time-picker-inline-select-font-size);
   -ms-overflow-style: none; /* Internet Explorer 10+ */
-  scrollbar-width: none; /* Firefox */
 }
 .time-picker-inline-select::-webkit-scrollbar {
   width: 10px;
@@ -15518,11 +15525,22 @@ div[dir=rtl] .calendar table td {
 div[dir=rtl] .calendar.months ~ .time-picker, div[dir=rtl] .calendar.years ~ .time-picker {
   display: none;
 }
+@media (max-width: 575.98px) {
+  div[dir=rtl] .calendar:not(:first-child) .calendar-nav {
+    border-top: var(--cui-calendar-nav-border);
+  }
+}
 div[dir=rtl] .show-week-numbers table {
   width: calc(var(--cui-calendar-table-cell-size) * 8);
 }
 div[dir=rtl] .calendars {
   display: flex;
+  flex-basis: min-content;
+}
+@media (max-width: 575.98px) {
+  div[dir=rtl] .calendars {
+    flex-wrap: wrap;
+  }
 }
 div[dir=rtl] .calendar-nav {
   display: flex;
@@ -16181,11 +16199,11 @@ div[dir=rtl] .time-picker-inline-select {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  scrollbar-width: none; /* Firefox */
   background-color: transparent;
   border: 0;
   font-size: var(--cui-time-picker-inline-select-font-size);
   -ms-overflow-style: none; /* Internet Explorer 10+ */
-  scrollbar-width: none; /* Firefox */
 }
 div[dir=rtl] .time-picker-inline-select::-webkit-scrollbar {
   width: 10px;
@@ -16252,7 +16270,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.3.0 (https://coreui.io)
+ * CoreUI PRO  v5.4.0 (https://coreui.io)
  * Copyright (c) 2024 creativeLabs Łukasz Holeczek
  * License (https://coreui.io/pro/license/)
  */
@@ -19167,9 +19185,11 @@ select.form-multi-select {
   top: 0;
   left: 0;
   z-index: 2;
+  max-width: 100%;
   height: 100%;
   padding: 1rem 0.75rem;
   overflow: hidden;
+  color: rgba(var(--cui-body-color-rgb), 0.65);
   text-align: start;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -19214,17 +19234,18 @@ select.form-multi-select {
   padding-bottom: 0.625rem;
 }
 .form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
-  color: rgba(var(--cui-body-color-rgb), 0.65);
   transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
 }
 .form-floating > .form-control:focus ~ label,
 .form-floating > .form-control:not(:placeholder-shown) ~ label,
 .form-floating > .form-control-plaintext ~ label,
 .form-floating > .form-select ~ label {
-  color: rgba(var(--cui-body-color-rgb), 0.65);
   transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
 }
-.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label::after {
+.form-floating > .form-control:-webkit-autofill ~ label {
+  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
+}
+.form-floating > textarea:not(:-moz-placeholder-shown) ~ label::after {
   position: absolute;
   inset: 1rem 0.375rem;
   z-index: -1;
@@ -19233,10 +19254,8 @@ select.form-multi-select {
   background-color: var(--cui-body-bg);
   border-radius: var(--cui-border-radius);
 }
-.form-floating > .form-control:focus ~ label::after,
-.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
-.form-floating > .form-control-plaintext ~ label::after,
-.form-floating > .form-select ~ label::after {
+.form-floating > textarea:focus ~ label::after,
+.form-floating > textarea:not(:placeholder-shown) ~ label::after {
   position: absolute;
   inset: 1rem 0.375rem;
   z-index: -1;
@@ -19245,9 +19264,8 @@ select.form-multi-select {
   background-color: var(--cui-body-bg);
   border-radius: var(--cui-border-radius);
 }
-.form-floating > .form-control:-webkit-autofill ~ label {
-  color: rgba(var(--cui-body-color-rgb), 0.65);
-  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
+.form-floating > textarea:disabled ~ label::after {
+  background-color: var(--cui-secondary-bg);
 }
 .form-floating > .form-control-plaintext ~ label {
   border-width: var(--cui-border-width) 0;
@@ -19256,10 +19274,6 @@ select.form-multi-select {
 .form-floating > .form-control:disabled ~ label {
   color: #6d7d9c;
 }
-.form-floating > :disabled ~ label::after,
-.form-floating > .form-control:disabled ~ label::after {
-  background-color: var(--cui-secondary-bg);
-}
 .input-group {
   position: relative;
   display: flex;
@@ -19374,7 +19388,7 @@ select.form-multi-select {
 .was-validated .form-control:valid, .form-control.is-valid {
   border-color: var(--cui-form-valid-border-color);
   padding-right: calc(1.5em + 0.75rem);
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%231b9e3e' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%231b9e3e' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
   background-position: right calc(0.375em + 0.1875rem) center;
   background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
@@ -19391,7 +19405,7 @@ select.form-multi-select {
   border-color: var(--cui-form-valid-border-color);
 }
 .was-validated .form-select:valid:not([multiple]):not([size]), .was-validated .form-select:valid:not([multiple])[size="1"], .form-select.is-valid:not([multiple]):not([size]), .form-select.is-valid:not([multiple])[size="1"] {
-  --cui-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%231b9e3e' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+  --cui-form-select-bg-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%231b9e3e' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3e%3c/svg%3e");
   padding-right: 4.125rem;
   background-position: right 0.75rem center, center right 2.25rem;
   background-size: 16px 12px, calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
@@ -20672,7 +20686,8 @@ select.form-multi-select {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
-.btn-group-vertical > .btn ~ .btn,
+.btn-group-vertical > .btn:nth-child(n+3),
+.btn-group-vertical > :not(.btn-check) + .btn,
 .btn-group-vertical > .btn-group:not(:first-child) > .btn {
   border-top-left-radius: 0;
   border-top-right-radius: 0;
@@ -21439,11 +21454,11 @@ select.form-multi-select {
   --cui-accordion-btn-padding-y: 1rem;
   --cui-accordion-btn-color: var(--cui-body-color);
   --cui-accordion-btn-bg: var(--cui-accordion-bg);
-  --cui-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgba%2837, 43, 54, 0.95%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
+  --cui-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='rgba%2837, 43, 54, 0.95%29' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
   --cui-accordion-btn-icon-width: 1.25rem;
   --cui-accordion-btn-icon-transform: rotate(-180deg);
   --cui-accordion-btn-icon-transition: transform 0.2s ease-in-out;
-  --cui-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233634a3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
+  --cui-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233634a3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
   --cui-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(88, 86, 214, 0.25);
   --cui-accordion-body-padding-x: 1.25rem;
   --cui-accordion-body-padding-y: 1rem;
@@ -21548,16 +21563,15 @@ select.form-multi-select {
 .accordion-flush > .accordion-item:last-child {
   border-bottom: 0;
 }
-.accordion-flush > .accordion-item > .accordion-header .accordion-button, .accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
-  border-radius: 0;
-}
-.accordion-flush > .accordion-item > .accordion-collapse {
+.accordion-flush > .accordion-item > .accordion-collapse,
+.accordion-flush > .accordion-item > .accordion-header .accordion-button,
+.accordion-flush > .accordion-item > .accordion-header .accordion-button.collapsed {
   border-radius: 0;
 }
 .dark-theme .accordion-button::after,
 [data-coreui-theme=dark] .accordion-button::after {
-  --cui-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba%28255, 255, 255, 0.87%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
-  --cui-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23403f98'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --cui-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba%28255, 255, 255, 0.87%29'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
+  --cui-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23403f98'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
 }
 .breadcrumb {
   --cui-breadcrumb-padding-x: 0;
@@ -22212,7 +22226,7 @@ select.form-multi-select {
 }
 .btn-close {
   --cui-btn-close-color: #080a0c;
-  --cui-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23080a0c'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
+  --cui-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23080a0c'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414'/%3e%3c/svg%3e");
   --cui-btn-close-opacity: 0.5;
   --cui-btn-close-hover-opacity: 0.75;
   --cui-btn-close-focus-shadow: 0 0 0 0.25rem rgba(88, 86, 214, 0.25);
@@ -22965,10 +22979,10 @@ select.form-multi-select {
   } ]
 } */
 .carousel-control-prev-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0'/%3e%3c/svg%3e");
 }
 .carousel-control-next-icon {
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
 }
 .carousel-indicators {
   position: absolute;
@@ -23755,11 +23769,22 @@ select.form-multi-select {
 .calendar.months ~ .time-picker, .calendar.years ~ .time-picker {
   display: none;
 }
+@media (max-width: 575.98px) {
+  .calendar:not(:first-child) .calendar-nav {
+    border-top: var(--cui-calendar-nav-border);
+  }
+}
 .show-week-numbers table {
   width: calc(var(--cui-calendar-table-cell-size) * 8);
 }
 .calendars {
   display: flex;
+  flex-basis: min-content;
+}
+@media (max-width: 575.98px) {
+  .calendars {
+    flex-wrap: wrap;
+  }
 }
 .calendar-nav {
   display: flex;
@@ -24907,9 +24932,9 @@ select.form-multi-select {
   --cui-sidebar-nav-group-items-padding-y: 0;
   --cui-sidebar-nav-group-items-padding-x: 0;
   --cui-sidebar-nav-group-indicator-color: var(--cui-tertiary-color);
-  --cui-sidebar-nav-group-indicator-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --cui-sidebar-nav-group-indicator-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
   --cui-sidebar-nav-group-indicator-hover-color: var(--cui-emphasis-color);
-  --cui-sidebar-nav-group-indicator-hover-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
+  --cui-sidebar-nav-group-indicator-hover-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/%3e%3c/svg%3e");
   --cui-sidebar-nav-group-toggle-show-color: var(--cui-body-color);
   position: relative;
   display: flex;
@@ -25169,10 +25194,10 @@ select.form-multi-select {
   }
 }
 .sidebar-narrow:not(.sidebar-end) ~ * {
-  --cui-sidebar-occupy-start: 4rem;
+  --cui-sidebar-occupy-start: 4rem !important;
 }
 .sidebar-narrow.sidebar-end ~ * {
-  --cui-sidebar-occupy-end: 4rem;
+  --cui-sidebar-occupy-end: 4rem !important;
 }
 .sidebar-narrow .nav-link {
   overflow: hidden;
@@ -25181,10 +25206,10 @@ select.form-multi-select {
   position: fixed;
 }
 .sidebar-narrow-unfoldable:not(.sidebar-end) ~ * {
-  --cui-sidebar-occupy-start: 4rem;
+  --cui-sidebar-occupy-start: 4rem !important;
 }
 .sidebar-narrow-unfoldable.sidebar-end ~ * {
-  --cui-sidebar-occupy-end: 4rem;
+  --cui-sidebar-occupy-end: 4rem !important;
 }
 .sidebar-narrow-unfoldable:hover {
   box-shadow: 0 0.5rem 1rem rgba(8, 10, 12, 0.15);
@@ -25447,11 +25472,11 @@ select.form-multi-select {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  scrollbar-width: none; /* Firefox */
   background-color: transparent;
   border: 0;
   font-size: var(--cui-time-picker-inline-select-font-size);
   -ms-overflow-style: none; /* Internet Explorer 10+ */
-  scrollbar-width: none; /* Firefox */
 }
 .time-picker-inline-select::-webkit-scrollbar {
   width: 10px;
diff --git a/vue/docs/assets/switch.html-CzcyoMGb.js b/vue/docs/assets/switch.html-C_xLNHwA.js
similarity index 77%
rename from vue/docs/assets/switch.html-CzcyoMGb.js
rename to vue/docs/assets/switch.html-C_xLNHwA.js
index 7e56cec8ea5..1ec0e8255f6 100644
--- a/vue/docs/assets/switch.html-CzcyoMGb.js
+++ b/vue/docs/assets/switch.html-C_xLNHwA.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "about",
@@ -7,8 +7,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("About "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#about",
-    "aria-hidden": "true"
+    href: "#about"
   }, "#")
 ], -1);
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, 'Vue Switch Components are a type of UI component that allows users to toggle between two states, usually represented as "on" or "off", "enabled" or "disabled", or "checked" or "unchecked".', -1);
@@ -20,17 +19,16 @@ const _hoisted_4 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Example "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#example",
-    "aria-hidden": "true"
+    href: "#example"
   }, "#")
 ], -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>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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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);
+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">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables">#</a></h3>', 3);
+const _hoisted_17 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cformswitch" tabindex="-1">CFormSwitch <a class="anchor-link" href="#cformswitch">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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-BKhXilE_.js b/vue/docs/assets/table.html-aCVCSEDl.js
similarity index 75%
rename from vue/docs/assets/table.html-BKhXilE_.js
rename to vue/docs/assets/table.html-aCVCSEDl.js
index d4481779e19..3ee4600d7be 100644
--- a/vue/docs/assets/table.html-BKhXilE_.js
+++ b/vue/docs/assets/table.html-aCVCSEDl.js
@@ -1,164 +1,167 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {
-  data: () => {
-    return {
-      columns: [
-        {
-          key: "id",
-          label: "#",
-          _props: { scope: "col" }
-        },
-        {
-          key: "class",
-          _props: { scope: "col" }
-        },
-        {
-          key: "heading_1",
-          label: "Heading",
-          _props: { scope: "col" }
-        },
-        {
-          key: "heading_2",
-          label: "Heading",
-          _props: { scope: "col" }
-        }
-      ],
-      items: [
-        {
-          id: 1,
-          class: "Mark",
-          heading_1: "Otto",
-          heading_2: "@mdo",
-          _cellProps: { id: { scope: "row" } }
-        },
-        {
-          id: 2,
-          class: "Jacob",
-          heading_1: "Thornton",
-          heading_2: "@fat",
-          _cellProps: { id: { scope: "row" } }
-        },
-        {
-          id: 3,
-          class: "Larry the Bird",
-          heading_2: "@twitter",
-          _cellProps: { id: { scope: "row" }, class: { colSpan: 2 } }
-        }
-      ],
-      columnsActiveTableExample: [
-        {
-          key: "id",
-          label: "#",
-          _props: { scope: "col" }
-        },
-        {
-          key: "class",
-          _props: { scope: "col" }
-        },
-        {
-          key: "heading_1",
-          label: "Heading",
-          _props: { scope: "col" }
-        },
-        {
-          key: "heading_2",
-          label: "Heading",
-          _props: { scope: "col" }
-        }
-      ],
-      itemsActiveTableExample: [
-        {
-          id: 1,
-          class: "Mark",
-          heading_1: "Otto",
-          heading_2: "@mdo",
-          _props: { active: true },
-          _cellProps: { id: { scope: "row" } }
-        },
-        {
-          id: 2,
-          class: "Jacob",
-          heading_1: "Thornton",
-          heading_2: "@fat",
-          _cellProps: { id: { scope: "row" } }
-        },
-        {
-          id: 3,
-          class: "Larry the Bird",
-          heading_2: "@twitter",
-          _cellProps: { id: { scope: "row" }, class: { active: true, colSpan: 2 } }
-        }
-      ],
-      columnsVariantExample: [
-        { key: "class", _props: { scope: "col" } },
-        { key: "heading_1", label: "Heading", _props: { scope: "col" } },
-        { key: "heading_2", label: "Heading", _props: { scope: "col" } }
-      ],
-      itemsVariantExample: [
-        {
-          class: "Default",
-          heading_1: "Cell",
-          heading_2: "Cell",
-          _cellProps: { class: { scope: "row" } }
-        },
-        {
-          class: "Primary",
-          heading_1: "Cell",
-          heading_2: "Cell",
-          _cellProps: { class: { scope: "row" } },
-          _props: { color: "primary" }
-        },
-        {
-          class: "Secondary",
-          heading_1: "Cell",
-          heading_2: "Cell",
-          _cellProps: { class: { scope: "row" } },
-          _props: { color: "secondary" }
-        },
-        {
-          class: "Success",
-          heading_1: "Cell",
-          heading_2: "Cell",
-          _cellProps: { class: { scope: "row" } },
-          _props: { color: "success" }
-        },
-        {
-          class: "Danger",
-          heading_1: "Cell",
-          heading_2: "Cell",
-          _cellProps: { class: { scope: "row" } },
-          _props: { color: "danger" }
-        },
-        {
-          class: "Warning",
-          heading_1: "Cell",
-          heading_2: "Cell",
-          _cellProps: { class: { scope: "row" } },
-          _props: { color: "warning" }
-        },
-        {
-          class: "Info",
-          heading_1: "Cell",
-          heading_2: "Cell",
-          _cellProps: { class: { scope: "row" } },
-          _props: { color: "info" }
-        },
-        {
-          class: "Light",
-          heading_1: "Cell",
-          heading_2: "Cell",
-          _cellProps: { class: { scope: "row" } },
-          _props: { color: "light" }
-        },
-        {
-          class: "Dark",
-          heading_1: "Cell",
-          heading_2: "Cell",
-          _cellProps: { class: { scope: "row" } },
-          _props: { color: "dark" }
-        }
-      ]
-    };
+  __name: "table.html",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const columns = [
+      {
+        key: "id",
+        label: "#",
+        _props: { scope: "col" }
+      },
+      {
+        key: "class",
+        _props: { scope: "col" }
+      },
+      {
+        key: "heading_1",
+        label: "Heading",
+        _props: { scope: "col" }
+      },
+      {
+        key: "heading_2",
+        label: "Heading",
+        _props: { scope: "col" }
+      }
+    ];
+    const items = [
+      {
+        id: 1,
+        class: "Mark",
+        heading_1: "Otto",
+        heading_2: "@mdo",
+        _cellProps: { id: { scope: "row" } }
+      },
+      {
+        id: 2,
+        class: "Jacob",
+        heading_1: "Thornton",
+        heading_2: "@fat",
+        _cellProps: { id: { scope: "row" } }
+      },
+      {
+        id: 3,
+        class: "Larry the Bird",
+        heading_2: "@twitter",
+        _cellProps: { id: { scope: "row" }, class: { colSpan: 2 } }
+      }
+    ];
+    const columnsActiveTableExample = [
+      {
+        key: "id",
+        label: "#",
+        _props: { scope: "col" }
+      },
+      {
+        key: "class",
+        _props: { scope: "col" }
+      },
+      {
+        key: "heading_1",
+        label: "Heading",
+        _props: { scope: "col" }
+      },
+      {
+        key: "heading_2",
+        label: "Heading",
+        _props: { scope: "col" }
+      }
+    ];
+    const itemsActiveTableExample = [
+      {
+        id: 1,
+        class: "Mark",
+        heading_1: "Otto",
+        heading_2: "@mdo",
+        _props: { active: true },
+        _cellProps: { id: { scope: "row" } }
+      },
+      {
+        id: 2,
+        class: "Jacob",
+        heading_1: "Thornton",
+        heading_2: "@fat",
+        _cellProps: { id: { scope: "row" } }
+      },
+      {
+        id: 3,
+        class: "Larry the Bird",
+        heading_2: "@twitter",
+        _cellProps: { id: { scope: "row" }, class: { active: true, colSpan: 2 } }
+      }
+    ];
+    const columnsVariantExample = [
+      { key: "class", _props: { scope: "col" } },
+      { key: "heading_1", label: "Heading", _props: { scope: "col" } },
+      { key: "heading_2", label: "Heading", _props: { scope: "col" } }
+    ];
+    const itemsVariantExample = [
+      {
+        class: "Default",
+        heading_1: "Cell",
+        heading_2: "Cell",
+        _cellProps: { class: { scope: "row" } }
+      },
+      {
+        class: "Primary",
+        heading_1: "Cell",
+        heading_2: "Cell",
+        _cellProps: { class: { scope: "row" } },
+        _props: { color: "primary" }
+      },
+      {
+        class: "Secondary",
+        heading_1: "Cell",
+        heading_2: "Cell",
+        _cellProps: { class: { scope: "row" } },
+        _props: { color: "secondary" }
+      },
+      {
+        class: "Success",
+        heading_1: "Cell",
+        heading_2: "Cell",
+        _cellProps: { class: { scope: "row" } },
+        _props: { color: "success" }
+      },
+      {
+        class: "Danger",
+        heading_1: "Cell",
+        heading_2: "Cell",
+        _cellProps: { class: { scope: "row" } },
+        _props: { color: "danger" }
+      },
+      {
+        class: "Warning",
+        heading_1: "Cell",
+        heading_2: "Cell",
+        _cellProps: { class: { scope: "row" } },
+        _props: { color: "warning" }
+      },
+      {
+        class: "Info",
+        heading_1: "Cell",
+        heading_2: "Cell",
+        _cellProps: { class: { scope: "row" } },
+        _props: { color: "info" }
+      },
+      {
+        class: "Light",
+        heading_1: "Cell",
+        heading_2: "Cell",
+        _cellProps: { class: { scope: "row" } },
+        _props: { color: "light" }
+      },
+      {
+        class: "Dark",
+        heading_1: "Cell",
+        heading_2: "Cell",
+        _cellProps: { class: { scope: "row" } },
+        _props: { color: "dark" }
+      }
+    ];
+    const __returned__ = { columns, items, columnsActiveTableExample, itemsActiveTableExample, columnsVariantExample, itemsVariantExample };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 };
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
@@ -168,8 +171,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("How to use Vue Table Component "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#how-to-use-vue-table-component",
-    "aria-hidden": "true"
+    href: "#how-to-use-vue-table-component"
   }, "#")
 ], -1);
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
@@ -185,11 +187,11 @@ 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-highlighter="prismjs" data-ext="vue" data-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_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>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> columns <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>\n<span class="line">  <span class="token keyword">const</span> items <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></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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-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">#</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-highlighter="prismjs" data-ext="vue" data-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_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>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> columnsVariantExample <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>\n<span class="line">  <span class="token keyword">const</span> itemsVariantExample <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></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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</a></h2><h3 id="striped-rows" tabindex="-1">Striped rows <a class="anchor-link" href="#striped-rows">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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" };
@@ -199,27 +201,27 @@ const _hoisted_28 = /* @__PURE__ */ createStaticVNode('<div class="language-vue
 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>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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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>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> columnsActiveTableExample <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>\n<span class="line">  <span class="token keyword">const</span> itemsActiveTableExample <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>\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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-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-highlighter="prismjs" data-ext="vue" data-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_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>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> columnsActiveTableExample <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>\n<span class="line">  <span class="token keyword">const</span> itemsActiveTableExample <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>\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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</a></h2><h3 id="bordered-tables" tabindex="-1">Bordered tables <a class="anchor-link" href="#bordered-tables">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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,19 +231,19 @@ 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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</a></h2><h3 id="table-head" tabindex="-1">Table head <a class="anchor-link" href="#table-head">#</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-highlighter="prismjs" data-ext="vue" data-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_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>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> columns <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 keyword">const</span> items <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></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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-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-highlighter="prismjs" data-ext="vue" data-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_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>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> columns <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 keyword">const</span> items <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></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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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-highlighter="prismjs" data-ext="vue" data-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_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>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> columns <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 keyword">const</span> footer <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>\n<span class="line">  <span class="token keyword">const</span> items <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></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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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-highlighter="prismjs" data-ext="vue" data-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_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>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> columns <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 keyword">const</span> items <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></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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-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-highlighter="prismjs" data-ext="vue" data-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_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>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> columns <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 keyword">const</span> items <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></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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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-highlighter="prismjs" data-ext="vue" data-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" };
@@ -253,7 +255,7 @@ const _hoisted_120 = /* @__PURE__ */ createStaticVNode('<div class="language-vue
 const _hoisted_121 = { class: "docs-example rounded-top p-4" };
 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-highlighter="prismjs" data-ext="vue" data-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);
+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">#</a></h2><h3 id="ctable" tabindex="-1">CTable <a class="anchor-link" href="#ctable">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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");
@@ -268,16 +270,16 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _hoisted_3,
     createBaseVNode("div", _hoisted_4, [
       createVNode(_component_CTable, {
-        columns: _ctx.columns,
-        items: _ctx.items
-      }, null, 8, ["columns", "items"])
+        columns: $setup.columns,
+        items: $setup.items
+      })
     ]),
     _hoisted_5,
     createBaseVNode("div", _hoisted_11, [
       createVNode(_component_CTable, {
-        columns: _ctx.columnsVariantExample,
-        items: _ctx.itemsVariantExample
-      }, null, 8, ["columns", "items"])
+        columns: $setup.columnsVariantExample,
+        items: $setup.itemsVariantExample
+      })
     ]),
     _hoisted_12,
     createBaseVNode("div", _hoisted_18, [
@@ -1452,59 +1454,59 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _hoisted_41,
     createBaseVNode("div", _hoisted_44, [
       createVNode(_component_CTable, {
-        columns: _ctx.columnsActiveTableExample,
-        items: _ctx.itemsActiveTableExample
-      }, null, 8, ["columns", "items"])
+        columns: $setup.columnsActiveTableExample,
+        items: $setup.itemsActiveTableExample
+      })
     ]),
     _hoisted_45,
     createBaseVNode("div", _hoisted_48, [
       createVNode(_component_CTable, {
         color: "dark",
-        columns: _ctx.columnsActiveTableExample,
-        items: _ctx.itemsActiveTableExample
-      }, null, 8, ["columns", "items"])
+        columns: $setup.columnsActiveTableExample,
+        items: $setup.itemsActiveTableExample
+      })
     ]),
     _hoisted_49,
     createBaseVNode("div", _hoisted_53, [
       createVNode(_component_CTable, {
         bordered: "",
-        columns: _ctx.columns,
-        items: _ctx.items
-      }, null, 8, ["columns", "items"])
+        columns: $setup.columns,
+        items: $setup.items
+      })
     ]),
     _hoisted_54,
     createBaseVNode("div", _hoisted_56, [
       createVNode(_component_CTable, {
         bordered: "",
         "border-color": "primary",
-        columns: _ctx.columns,
-        items: _ctx.items
-      }, null, 8, ["columns", "items"])
+        columns: $setup.columns,
+        items: $setup.items
+      })
     ]),
     _hoisted_57,
     createBaseVNode("div", _hoisted_60, [
       createVNode(_component_CTable, {
         borderless: "",
-        columns: _ctx.columns,
-        items: _ctx.items
-      }, null, 8, ["columns", "items"])
+        columns: $setup.columns,
+        items: $setup.items
+      })
     ]),
     _hoisted_61,
     createBaseVNode("div", _hoisted_62, [
       createVNode(_component_CTable, {
         color: "dark",
         borderless: "",
-        columns: _ctx.columns,
-        items: _ctx.items
-      }, null, 8, ["columns", "items"])
+        columns: $setup.columns,
+        items: $setup.items
+      })
     ]),
     _hoisted_63,
     createBaseVNode("div", _hoisted_66, [
       createVNode(_component_CTable, {
         small: "",
-        columns: _ctx.columns,
-        items: _ctx.items
-      }, null, 8, ["columns", "items"])
+        columns: $setup.columns,
+        items: $setup.items
+      })
     ]),
     _hoisted_67,
     createBaseVNode("div", _hoisted_70, [
diff --git a/vue/docs/assets/tabs.html-BryTxUY8.js b/vue/docs/assets/tabs.html-BjypzLaI.js
similarity index 78%
rename from vue/docs/assets/tabs.html-BryTxUY8.js
rename to vue/docs/assets/tabs.html-BjypzLaI.js
index 1546ad39f6f..fbdc93c9bfd 100644
--- a/vue/docs/assets/tabs.html-BryTxUY8.js
+++ b/vue/docs/assets/tabs.html-BjypzLaI.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "example",
@@ -7,8 +7,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Example "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#example",
-    "aria-hidden": "true"
+    href: "#example"
   }, "#")
 ], -1);
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, [
@@ -17,19 +16,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-highlighter="prismjs" data-ext="vue" data-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_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">#</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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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_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">#</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">#</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">#</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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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 +49,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-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);
+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">#</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">#</a></h3>', 3);
+const _hoisted_57 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="ctab" tabindex="-1">CTab <a class="anchor-link" href="#ctab">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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-VjAtYprD.js b/vue/docs/assets/textarea.html-Ck18GNEv.js
similarity index 59%
rename from vue/docs/assets/textarea.html-VjAtYprD.js
rename to vue/docs/assets/textarea.html-Ck18GNEv.js
index 9333960b55d..fbbb3fe91d7 100644
--- a/vue/docs/assets/textarea.html-VjAtYprD.js
+++ b/vue/docs/assets/textarea.html-Ck18GNEv.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "example",
@@ -7,16 +7,15 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Example "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#example",
-    "aria-hidden": "true"
+    href: "#example"
   }, "#")
 ], -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>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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</a></h2><h3 id="sass-variables" tabindex="-1">SASS variables <a class="anchor-link" href="#sass-variables">#</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 +26,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-highlighter="prismjs" data-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);
+const _hoisted_20 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="cformtextarea" tabindex="-1">CFormTextarea <a class="anchor-link" href="#cformtextarea">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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-DlV52mWV.js b/vue/docs/assets/time-picker.html-CvM-vSGB.js
similarity index 59%
rename from vue/docs/assets/time-picker.html-DlV52mWV.js
rename to vue/docs/assets/time-picker.html-CvM-vSGB.js
index bd09935017f..7e3a1a91d34 100644
--- a/vue/docs/assets/time-picker.html-DlV52mWV.js
+++ b/vue/docs/assets/time-picker.html-CvM-vSGB.js
@@ -1,10 +1,12 @@
-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";
+import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, t as toDisplayString, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {
-  setup() {
+  __name: "time-picker.html",
+  setup(__props, { expose: __expose }) {
+    __expose();
     const vTime = ref("02:17:35 PM");
-    return {
-      vTime
-    };
+    const __returned__ = { vTime, ref };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 };
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
@@ -14,8 +16,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Example "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#example",
-    "aria-hidden": "true"
+    href: "#example"
   }, "#")
 ], -1);
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("p", null, "To create a basic Vue Time Picker, use:", -1);
@@ -23,66 +24,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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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>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 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></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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</a></h2><h3 id="disable-minutes-and-seconds" tabindex="-1">Disable minutes and seconds <a class="anchor-link" href="#disable-minutes-and-seconds">#</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-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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);
+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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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">#</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">#</a></h3>', 3);
+const _hoisted_93 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="ctimepicker" tabindex="-1">CTimePicker <a class="anchor-link" href="#ctimepicker">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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-DUmgmbI1.js
similarity index 70%
rename from vue/docs/assets/toast.html-B70IM5zC.js
rename to vue/docs/assets/toast.html-DUmgmbI1.js
index bd86351c978..d47514e9264 100644
--- a/vue/docs/assets/toast.html-B70IM5zC.js
+++ b/vue/docs/assets/toast.html-DUmgmbI1.js
@@ -1,20 +1,21 @@
-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";
+import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, a as createStaticVNode, f as createTextVNode, F as Fragment, h as renderList, V as createBlock, t as toDisplayString } from "./app-DGOUrGv-.js";
 const _sfc_main = {
-  data() {
-    return {
-      toasts: []
-    };
-  },
-  methods: {
-    createToast() {
-      this.toasts.push({
+  __name: "toast.html",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const toasts = ref([]);
+    const createToast = () => {
+      toasts.value.push({
         title: "new toast",
         content: "Lorem ipsum dolor cet emit"
       });
-    }
+    };
+    const __returned__ = { toasts, createToast, ref };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 };
-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_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">#</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">#</a></h2><h3 id="basic" tabindex="-1">Basic <a class="anchor-link" href="#basic">#</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",
@@ -37,7 +38,7 @@ const _hoisted_13 = /* @__PURE__ */ createStaticVNode('<div class="language-vue
 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_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 class="token keyword">const</span> toasts <span class="token operator">=</span> <span class="token function">ref</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">const</span> <span class="token function-variable function">createToast</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">    toasts<span class="token punctuation">.</span>value<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></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>CButton</span> <span class="token attr-name">color</span><span class="token attr-value"><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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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",
@@ -56,7 +57,7 @@ const _hoisted_21 = /* @__PURE__ */ createBaseVNode("svg", {
 ], -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_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">#</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",
@@ -92,18 +93,18 @@ const _hoisted_31 = /* @__PURE__ */ createBaseVNode("svg", {
 ], -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_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">#</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_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">#</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);
+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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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">#</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">#</a></h3>', 3);
+const _hoisted_55 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="ctoast" tabindex="-1">CToast <a class="anchor-link" href="#ctoast">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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");
@@ -142,19 +143,19 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     createBaseVNode("div", _hoisted_14, [
       createVNode(_component_CButton, {
         color: "primary",
-        onClick: $options.createToast
+        onClick: $setup.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) => {
+          (openBlock(true), createElementBlock(Fragment, null, renderList($setup.toasts, (toast, index) => {
             return openBlock(), createBlock(_component_CToast, {
               visible: "",
               key: index
diff --git a/vue/docs/assets/tooltip.html-D2DMDPTK.js b/vue/docs/assets/tooltip.html-COZMp0t7.js
similarity index 71%
rename from vue/docs/assets/tooltip.html-D2DMDPTK.js
rename to vue/docs/assets/tooltip.html-COZMp0t7.js
index c1e2eca232b..7a24fa62dae 100644
--- a/vue/docs/assets/tooltip.html-D2DMDPTK.js
+++ b/vue/docs/assets/tooltip.html-COZMp0t7.js
@@ -1,11 +1,14 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, X as resolveDirective, o as openBlock, c as createElementBlock, b as createBaseVNode, f as createTextVNode, Y as withDirectives, V as createBlock, e as withCtx, d as createVNode, a as createStaticVNode, Z as mergeProps, $ as toHandlers } from "./app-DGOUrGv-.js";
 const _sfc_main = {
-  data() {
-    return {
-      customTooltipStyle: {
-        "--cui-tooltip-bg": "var(--cui-primary)"
-      }
+  __name: "tooltip.html",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const customTooltipStyle = {
+      "--cui-tooltip-bg": "var(--cui-primary)"
     };
+    const __returned__ = { customTooltipStyle };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 };
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
@@ -15,8 +18,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Examples "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#examples",
-    "aria-hidden": "true"
+    href: "#examples"
   }, "#")
 ], -1);
 const _hoisted_2 = /* @__PURE__ */ createBaseVNode("h3", {
@@ -26,25 +28,24 @@ const _hoisted_2 = /* @__PURE__ */ createBaseVNode("h3", {
   /* @__PURE__ */ createTextVNode("Tooltips on links "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#tooltips-on-links",
-    "aria-hidden": "true"
+    href: "#tooltips-on-links"
   }, "#")
 ], -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_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">#</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_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">#</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_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-tooltips" tabindex="-1">Custom tooltips <a class="anchor-link" href="#custom-tooltips">#</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_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">const</span> customTooltipStyle <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></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>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 tooltip<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>CButton</span><span class="token punctuation">&gt;</span></span></span>\n<span class="line">    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</a></h2><h3 id="disabled-elements" tabindex="-1">Disabled elements <a class="anchor-link" href="#disabled-elements">#</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);
+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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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">#</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">#</a></h3>', 3);
+const _hoisted_30 = /* @__PURE__ */ createStaticVNode('<h2 id="api" tabindex="-1">API <a class="anchor-link" href="#api">#</a></h2><h3 id="ctooltip" tabindex="-1">CTooltip <a class="anchor-link" href="#ctooltip">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">5.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">#</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");
@@ -207,7 +208,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_CTooltip, {
         content: "This top tooltip is themed via CSS variables.",
         placement: "top",
-        style: normalizeStyle($data.customTooltipStyle)
+        style: $setup.customTooltipStyle
       }, {
         toggler: withCtx(({ id, on }) => [
           createVNode(_component_CButton, mergeProps({
@@ -215,13 +216,13 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
             "aria-describedby": id
           }, toHandlers(on)), {
             default: withCtx(() => [
-              createTextVNode("Custom popover")
+              createTextVNode("Custom tooltip")
             ]),
             _: 2
           }, 1040, ["aria-describedby"])
         ]),
         _: 1
-      }, 8, ["style"])
+      })
     ]),
     _hoisted_17,
     createBaseVNode("div", _hoisted_21, [
@@ -260,7 +261,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   ]);
 }
 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"}');
+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 tooltips","slug":"custom-tooltips","link":"#custom-tooltips","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-Br_AIuga.js b/vue/docs/assets/v4.html-Br_AIuga.js
deleted file mode 100644
index 2ff09992e83..00000000000
--- a/vue/docs/assets/v4.html-Br_AIuga.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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 = [
-  _hoisted_1
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_134);
-}
-const v4_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "v4.html.vue"]]);
-const data = JSON.parse('{"path":"/migration/v4.html","title":"Migration to v4","lang":"en-US","frontmatter":{"title":"Migration to v4","description":"Track and review changes to the CoreUI for Vue.js components to help you migrate from v3 to v4.","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/migration/v4.html"}]]},"headers":[{"level":2,"title":"Components","slug":"components","link":"#components","children":[{"level":3,"title":"CAlert","slug":"calert","link":"#calert","children":[]},{"level":3,"title":"CBadge","slug":"cbadge","link":"#cbadge","children":[]},{"level":3,"title":"CBreadcrumb","slug":"cbreadcrumb","link":"#cbreadcrumb","children":[]},{"level":3,"title":"CButton","slug":"cbutton","link":"#cbutton","children":[]},{"level":3,"title":"CCard","slug":"ccard","link":"#ccard","children":[]},{"level":3,"title":"CCarousel","slug":"ccarousel","link":"#ccarousel","children":[]},{"level":3,"title":"CCollapse","slug":"ccollapse","link":"#ccollapse","children":[]},{"level":3,"title":"CDropdown","slug":"cdropdown","link":"#cdropdown","children":[]},{"level":3,"title":"CEmbed","slug":"cembed","link":"#cembed","children":[]},{"level":3,"title":"CFade","slug":"cfade","link":"#cfade","children":[]},{"level":3,"title":"CHeader","slug":"cheader","link":"#cheader","children":[]},{"level":3,"title":"CImg","slug":"cimg","link":"#cimg","children":[]},{"level":3,"title":"CJumbotron","slug":"cjumbotron","link":"#cjumbotron","children":[]},{"level":3,"title":"CListGroup","slug":"clistgroup","link":"#clistgroup","children":[]},{"level":3,"title":"CMedia","slug":"cmedia","link":"#cmedia","children":[]},{"level":3,"title":"CModal","slug":"cmodal","link":"#cmodal","children":[]},{"level":3,"title":"CNav","slug":"cnav","link":"#cnav","children":[]},{"level":3,"title":"CNavbar","slug":"cnavbar","link":"#cnavbar","children":[]},{"level":3,"title":"CPagination","slug":"cpagination","link":"#cpagination","children":[]},{"level":3,"title":"CPopover","slug":"cpopover","link":"#cpopover","children":[]},{"level":3,"title":"CProgress","slug":"cprogress","link":"#cprogress","children":[]},{"level":3,"title":"CProgressBar","slug":"cprogressbar","link":"#cprogressbar","children":[]},{"level":3,"title":"CSidebar","slug":"csidebar","link":"#csidebar","children":[]},{"level":3,"title":"CSwitch","slug":"cswitch","link":"#cswitch","children":[]},{"level":3,"title":"CSpinner","slug":"cspinner","link":"#cspinner","children":[]},{"level":3,"title":"CTabs","slug":"ctabs","link":"#ctabs","children":[]},{"level":3,"title":"CToast","slug":"ctoast","link":"#ctoast","children":[]},{"level":3,"title":"CToggler","slug":"ctoggler","link":"#ctoggler","children":[]},{"level":3,"title":"CTooltip","slug":"ctooltip","link":"#ctooltip","children":[]}]},{"level":2,"title":"Forms","slug":"forms","link":"#forms","children":[{"level":3,"title":"CFormGroup","slug":"cformgroup","link":"#cformgroup","children":[]},{"level":3,"title":"CInput","slug":"cinput","link":"#cinput","children":[]},{"level":3,"title":"CInputCheckbox","slug":"cinputcheckbox","link":"#cinputcheckbox","children":[]},{"level":3,"title":"CInputFile","slug":"cinputfile","link":"#cinputfile","children":[]},{"level":3,"title":"CInputRadio","slug":"cinputradio","link":"#cinputradio","children":[]},{"level":3,"title":"CInputGroup","slug":"cinputgroup","link":"#cinputgroup","children":[]},{"level":3,"title":"CSelect","slug":"cselect","link":"#cselect","children":[]},{"level":3,"title":"CValidFeedback","slug":"cvalidfeedback","link":"#cvalidfeedback","children":[]},{"level":3,"title":"CInvalidFeedback","slug":"cinvalidfeedback","link":"#cinvalidfeedback","children":[]}]},{"level":2,"title":"Layout","slug":"layout","link":"#layout","children":[{"level":3,"title":"CContainer","slug":"ccontainer","link":"#ccontainer","children":[]},{"level":3,"title":"CCol","slug":"ccol","link":"#ccol","children":[]},{"level":3,"title":"CRow","slug":"crow","link":"#crow","children":[]}]}],"filePathRelative":"migration/v4.md"}');
-export {
-  v4_html as comp,
-  data
-};
diff --git a/vue/docs/assets/v4.html-qK__BZTD.js b/vue/docs/assets/v4.html-qK__BZTD.js
new file mode 100644
index 00000000000..34d989ecff6
--- /dev/null
+++ b/vue/docs/assets/v4.html-qK__BZTD.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.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">#</a></h2><h3 id="calert" tabindex="-1">CAlert <a class="anchor-link" href="#calert">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</a></h4><ul><li>Component is depracated.</li></ul><h3 id="ccollapse" tabindex="-1">CCollapse <a class="anchor-link" href="#ccollapse">#</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">#</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">#</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">#</a></h3><ul><li>Component is depracated.</li></ul><h3 id="cfade" tabindex="-1">CFade <a class="anchor-link" href="#cfade">#</a></h3><ul><li>Component is depracated.</li></ul><h3 id="cheader" tabindex="-1">CHeader <a class="anchor-link" href="#cheader">#</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">#</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">#</a></h3><ul><li>Component is depracated.</li></ul><h3 id="clistgroup" tabindex="-1">CListGroup <a class="anchor-link" href="#clistgroup">#</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">#</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">#</a></h3><ul><li>Component is depracated.</li></ul><h3 id="cmodal" tabindex="-1">CModal <a class="anchor-link" href="#cmodal">#</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">#</a></h4><ul><li>Deprecated property <code>tag</code>.</li></ul><h4 id="cmodalfooter" tabindex="-1">CModalFooter <a class="anchor-link" href="#cmodalfooter">#</a></h4><ul><li>Deprecated property <code>tag</code>.</li></ul><h4 id="cmodalheader" tabindex="-1">CModalHeader <a class="anchor-link" href="#cmodalheader">#</a></h4><ul><li>Deprecated property <code>tag</code>.</li></ul><h3 id="cnav" tabindex="-1">CNav <a class="anchor-link" href="#cnav">#</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">#</a></h4><ul><li>Deprecated property <code>default</code>.</li></ul><h3 id="cnavbar" tabindex="-1">CNavbar <a class="anchor-link" href="#cnavbar">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</a></h4><ul><li>Deprecated property <code>fade</code>.</li></ul><h4 id="ctabpane" tabindex="-1">CTabPane <a class="anchor-link" href="#ctabpane">#</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">#</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">#</a></h4><h4 id="ctoastheader" tabindex="-1">CToastHeader <a class="anchor-link" href="#ctoastheader">#</a></h4><h3 id="ctoggler" tabindex="-1">CToggler <a class="anchor-link" href="#ctoggler">#</a></h3><ul><li>Component is depracated.</li></ul><h3 id="ctooltip" tabindex="-1">CTooltip <a class="anchor-link" href="#ctooltip">#</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">#</a></h2><h3 id="cformgroup" tabindex="-1">CFormGroup <a class="anchor-link" href="#cformgroup">#</a></h3><ul><li>Component is depracated.</li></ul><h3 id="cinput" tabindex="-1">CInput <a class="anchor-link" href="#cinput">#</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">#</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">#</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">#</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">#</a></h3><h4 id="cinputgroupaddon" tabindex="-1">CInputGroupAddon <a class="anchor-link" href="#cinputgroupaddon">#</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">#</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">#</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">#</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">#</a></h2><h3 id="ccontainer" tabindex="-1">CContainer <a class="anchor-link" href="#ccontainer">#</a></h3><ul><li>Deprecated property <code>tag</code>.</li></ul><h3 id="ccol" tabindex="-1">CCol <a class="anchor-link" href="#ccol">#</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">#</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 = [
+  _hoisted_1
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_134);
+}
+const v4_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "v4.html.vue"]]);
+const data = JSON.parse('{"path":"/migration/v4.html","title":"Migration to v4","lang":"en-US","frontmatter":{"title":"Migration to v4","description":"Track and review changes to the CoreUI for Vue.js components to help you migrate from v3 to v4.","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/migration/v4.html"}]]},"headers":[{"level":2,"title":"Components","slug":"components","link":"#components","children":[{"level":3,"title":"CAlert","slug":"calert","link":"#calert","children":[]},{"level":3,"title":"CBadge","slug":"cbadge","link":"#cbadge","children":[]},{"level":3,"title":"CBreadcrumb","slug":"cbreadcrumb","link":"#cbreadcrumb","children":[]},{"level":3,"title":"CButton","slug":"cbutton","link":"#cbutton","children":[]},{"level":3,"title":"CCard","slug":"ccard","link":"#ccard","children":[]},{"level":3,"title":"CCarousel","slug":"ccarousel","link":"#ccarousel","children":[]},{"level":3,"title":"CCollapse","slug":"ccollapse","link":"#ccollapse","children":[]},{"level":3,"title":"CDropdown","slug":"cdropdown","link":"#cdropdown","children":[]},{"level":3,"title":"CEmbed","slug":"cembed","link":"#cembed","children":[]},{"level":3,"title":"CFade","slug":"cfade","link":"#cfade","children":[]},{"level":3,"title":"CHeader","slug":"cheader","link":"#cheader","children":[]},{"level":3,"title":"CImg","slug":"cimg","link":"#cimg","children":[]},{"level":3,"title":"CJumbotron","slug":"cjumbotron","link":"#cjumbotron","children":[]},{"level":3,"title":"CListGroup","slug":"clistgroup","link":"#clistgroup","children":[]},{"level":3,"title":"CMedia","slug":"cmedia","link":"#cmedia","children":[]},{"level":3,"title":"CModal","slug":"cmodal","link":"#cmodal","children":[]},{"level":3,"title":"CNav","slug":"cnav","link":"#cnav","children":[]},{"level":3,"title":"CNavbar","slug":"cnavbar","link":"#cnavbar","children":[]},{"level":3,"title":"CPagination","slug":"cpagination","link":"#cpagination","children":[]},{"level":3,"title":"CPopover","slug":"cpopover","link":"#cpopover","children":[]},{"level":3,"title":"CProgress","slug":"cprogress","link":"#cprogress","children":[]},{"level":3,"title":"CProgressBar","slug":"cprogressbar","link":"#cprogressbar","children":[]},{"level":3,"title":"CSidebar","slug":"csidebar","link":"#csidebar","children":[]},{"level":3,"title":"CSwitch","slug":"cswitch","link":"#cswitch","children":[]},{"level":3,"title":"CSpinner","slug":"cspinner","link":"#cspinner","children":[]},{"level":3,"title":"CTabs","slug":"ctabs","link":"#ctabs","children":[]},{"level":3,"title":"CToast","slug":"ctoast","link":"#ctoast","children":[]},{"level":3,"title":"CToggler","slug":"ctoggler","link":"#ctoggler","children":[]},{"level":3,"title":"CTooltip","slug":"ctooltip","link":"#ctooltip","children":[]}]},{"level":2,"title":"Forms","slug":"forms","link":"#forms","children":[{"level":3,"title":"CFormGroup","slug":"cformgroup","link":"#cformgroup","children":[]},{"level":3,"title":"CInput","slug":"cinput","link":"#cinput","children":[]},{"level":3,"title":"CInputCheckbox","slug":"cinputcheckbox","link":"#cinputcheckbox","children":[]},{"level":3,"title":"CInputFile","slug":"cinputfile","link":"#cinputfile","children":[]},{"level":3,"title":"CInputRadio","slug":"cinputradio","link":"#cinputradio","children":[]},{"level":3,"title":"CInputGroup","slug":"cinputgroup","link":"#cinputgroup","children":[]},{"level":3,"title":"CSelect","slug":"cselect","link":"#cselect","children":[]},{"level":3,"title":"CValidFeedback","slug":"cvalidfeedback","link":"#cvalidfeedback","children":[]},{"level":3,"title":"CInvalidFeedback","slug":"cinvalidfeedback","link":"#cinvalidfeedback","children":[]}]},{"level":2,"title":"Layout","slug":"layout","link":"#layout","children":[{"level":3,"title":"CContainer","slug":"ccontainer","link":"#ccontainer","children":[]},{"level":3,"title":"CCol","slug":"ccol","link":"#ccol","children":[]},{"level":3,"title":"CRow","slug":"crow","link":"#crow","children":[]}]}],"filePathRelative":"migration/v4.md"}');
+export {
+  v4_html as comp,
+  data
+};
diff --git a/vue/docs/assets/v5.html-Csxq3zcX.js b/vue/docs/assets/v5.html-Csxq3zcX.js
new file mode 100644
index 00000000000..cd5415f3dae
--- /dev/null
+++ b/vue/docs/assets/v5.html-Csxq3zcX.js
@@ -0,0 +1,15 @@
+import { _ as _export_sfc, o as openBlock, c as createElementBlock, a as createStaticVNode } from "./app-DGOUrGv-.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">#</a></h2><h3 id="calertheading" tabindex="-1">CAlertHeading <a class="anchor-link" href="#calertheading">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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">#</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
+];
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, _hoisted_91);
+}
+const v5_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "v5.html.vue"]]);
+const data = JSON.parse('{"path":"/migration/v5.html","title":"Migration to v5","lang":"en-US","frontmatter":{"title":"Migration to v5","description":"Track and review changes to the CoreUI for Vue.js components to help you migrate from v4 to v5.","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/migration/v5.html"}]]},"headers":[{"level":2,"title":"Components","slug":"components","link":"#components","children":[{"level":3,"title":"CAlertHeading","slug":"calertheading","link":"#calertheading","children":[]},{"level":3,"title":"CAvatar","slug":"cavatar","link":"#cavatar","children":[]},{"level":3,"title":"CBadge","slug":"cbadge","link":"#cbadge","children":[]},{"level":3,"title":"CButton","slug":"cbutton","link":"#cbutton","children":[]},{"level":3,"title":"CCard","slug":"ccard","link":"#ccard","children":[]},{"level":3,"title":"CCardHeader","slug":"ccardheader","link":"#ccardheader","children":[]},{"level":3,"title":"CCardImage","slug":"ccardimage","link":"#ccardimage","children":[]},{"level":3,"title":"CCardSubtitle","slug":"ccardsubtitle","link":"#ccardsubtitle","children":[]},{"level":3,"title":"CCardText","slug":"ccardtext","link":"#ccardtext","children":[]},{"level":3,"title":"CCardTitle","slug":"ccardtitle","link":"#ccardtitle","children":[]},{"level":3,"title":"CCloseButton","slug":"cclosebutton","link":"#cclosebutton","children":[]},{"level":3,"title":"CDatePicker","slug":"cdatepicker","link":"#cdatepicker","children":[]},{"level":3,"title":"CDateRangePicker","slug":"cdaterangepicker","link":"#cdaterangepicker","children":[]},{"level":3,"title":"CDropdown","slug":"cdropdown","link":"#cdropdown","children":[]},{"level":3,"title":"CDropdownHeader","slug":"cdropdownheader","link":"#cdropdownheader","children":[]},{"level":3,"title":"CDropdownItem","slug":"cdropdownitem","link":"#cdropdownitem","children":[]},{"level":3,"title":"CDropdownItemPlain","slug":"cdropdownitemplain","link":"#cdropdownitemplain","children":[]},{"level":3,"title":"CDropdownMenu","slug":"cdropdownmenu","link":"#cdropdownmenu","children":[]},{"level":3,"title":"CDropdownToggle","slug":"cdropdowntoggle","link":"#cdropdowntoggle","children":[]},{"level":3,"title":"CFormFeedback","slug":"cformfeedback","link":"#cformfeedback","children":[]},{"level":3,"title":"CFormText","slug":"cformtext","link":"#cformtext","children":[]},{"level":3,"title":"CHeaderBrand","slug":"cheaderbrand","link":"#cheaderbrand","children":[]},{"level":3,"title":"CHeaderNav","slug":"cheadernav","link":"#cheadernav","children":[]},{"level":3,"title":"CInputGroupText","slug":"cinputgrouptext","link":"#cinputgrouptext","children":[]},{"level":3,"title":"CLink","slug":"clink","link":"#clink","children":[]},{"level":3,"title":"CListGroup","slug":"clistgroup","link":"#clistgroup","children":[]},{"level":3,"title":"CListGroupItem","slug":"clistgroupitem","link":"#clistgroupitem","children":[]},{"level":3,"title":"CModalTitle","slug":"cmodaltitle","link":"#cmodaltitle","children":[]},{"level":3,"title":"CMultiSelect","slug":"cmultiselect","link":"#cmultiselect","children":[]},{"level":3,"title":"CNav","slug":"cnav","link":"#cnav","children":[]},{"level":3,"title":"CNavbar","slug":"cnavbar","link":"#cnavbar","children":[]},{"level":3,"title":"CNavbarBrand","slug":"cnavbarbrand","link":"#cnavbarbrand","children":[]},{"level":3,"title":"CNavbarNav","slug":"cnavbarnav","link":"#cnavbarnav","children":[]},{"level":3,"title":"CNavItem","slug":"cnavitem","link":"#cnavitem","children":[]},{"level":3,"title":"CNavLink","slug":"cnavlink","link":"#cnavlink","children":[]},{"level":3,"title":"CNavTitle","slug":"cnavtitle","link":"#cnavtitle","children":[]},{"level":3,"title":"COffcanvasTitle","slug":"coffcanvastitle","link":"#coffcanvastitle","children":[]},{"level":3,"title":"CPaginationItem","slug":"cpaginationitem","link":"#cpaginationitem","children":[]},{"level":3,"title":"CPlaceholder","slug":"cplaceholder","link":"#cplaceholder","children":[]},{"level":3,"title":"CSidebar","slug":"csidebar","link":"#csidebar","children":[]},{"level":3,"title":"CSpinner","slug":"cspinner","link":"#cspinner","children":[]},{"level":3,"title":"CToastClose","slug":"ctoastclose","link":"#ctoastclose","children":[]}]}],"filePathRelative":"migration/v5.md"}');
+export {
+  v5_html as comp,
+  data
+};
diff --git a/vue/docs/assets/v5.html-D8yxOVYF.js b/vue/docs/assets/v5.html-D8yxOVYF.js
deleted file mode 100644
index fdd074d78e9..00000000000
--- a/vue/docs/assets/v5.html-D8yxOVYF.js
+++ /dev/null
@@ -1,15 +0,0 @@
-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-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
-];
-function _sfc_render(_ctx, _cache) {
-  return openBlock(), createElementBlock("div", null, _hoisted_91);
-}
-const v5_html = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "v5.html.vue"]]);
-const data = JSON.parse('{"path":"/migration/v5.html","title":"Migration to v5","lang":"en-US","frontmatter":{"title":"Migration to v5","description":"Track and review changes to the CoreUI for Vue.js components to help you migrate from v4 to v5.","head":[["link",{"rel":"canonical","href":"https://coreui.io/vue/docs/migration/v5.html"}]]},"headers":[{"level":2,"title":"Components","slug":"components","link":"#components","children":[{"level":3,"title":"CAlertHeading","slug":"calertheading","link":"#calertheading","children":[]},{"level":3,"title":"CAvatar","slug":"cavatar","link":"#cavatar","children":[]},{"level":3,"title":"CBadge","slug":"cbadge","link":"#cbadge","children":[]},{"level":3,"title":"CButton","slug":"cbutton","link":"#cbutton","children":[]},{"level":3,"title":"CCard","slug":"ccard","link":"#ccard","children":[]},{"level":3,"title":"CCardHeader","slug":"ccardheader","link":"#ccardheader","children":[]},{"level":3,"title":"CCardImage","slug":"ccardimage","link":"#ccardimage","children":[]},{"level":3,"title":"CCardSubtitle","slug":"ccardsubtitle","link":"#ccardsubtitle","children":[]},{"level":3,"title":"CCardText","slug":"ccardtext","link":"#ccardtext","children":[]},{"level":3,"title":"CCardTitle","slug":"ccardtitle","link":"#ccardtitle","children":[]},{"level":3,"title":"CCloseButton","slug":"cclosebutton","link":"#cclosebutton","children":[]},{"level":3,"title":"CDatePicker","slug":"cdatepicker","link":"#cdatepicker","children":[]},{"level":3,"title":"CDateRangePicker","slug":"cdaterangepicker","link":"#cdaterangepicker","children":[]},{"level":3,"title":"CDropdown","slug":"cdropdown","link":"#cdropdown","children":[]},{"level":3,"title":"CDropdownHeader","slug":"cdropdownheader","link":"#cdropdownheader","children":[]},{"level":3,"title":"CDropdownItem","slug":"cdropdownitem","link":"#cdropdownitem","children":[]},{"level":3,"title":"CDropdownItemPlain","slug":"cdropdownitemplain","link":"#cdropdownitemplain","children":[]},{"level":3,"title":"CDropdownMenu","slug":"cdropdownmenu","link":"#cdropdownmenu","children":[]},{"level":3,"title":"CDropdownToggle","slug":"cdropdowntoggle","link":"#cdropdowntoggle","children":[]},{"level":3,"title":"CFormFeedback","slug":"cformfeedback","link":"#cformfeedback","children":[]},{"level":3,"title":"CFormText","slug":"cformtext","link":"#cformtext","children":[]},{"level":3,"title":"CHeaderBrand","slug":"cheaderbrand","link":"#cheaderbrand","children":[]},{"level":3,"title":"CHeaderNav","slug":"cheadernav","link":"#cheadernav","children":[]},{"level":3,"title":"CInputGroupText","slug":"cinputgrouptext","link":"#cinputgrouptext","children":[]},{"level":3,"title":"CLink","slug":"clink","link":"#clink","children":[]},{"level":3,"title":"CListGroup","slug":"clistgroup","link":"#clistgroup","children":[]},{"level":3,"title":"CListGroupItem","slug":"clistgroupitem","link":"#clistgroupitem","children":[]},{"level":3,"title":"CModalTitle","slug":"cmodaltitle","link":"#cmodaltitle","children":[]},{"level":3,"title":"CMultiSelect","slug":"cmultiselect","link":"#cmultiselect","children":[]},{"level":3,"title":"CNav","slug":"cnav","link":"#cnav","children":[]},{"level":3,"title":"CNavbar","slug":"cnavbar","link":"#cnavbar","children":[]},{"level":3,"title":"CNavbarBrand","slug":"cnavbarbrand","link":"#cnavbarbrand","children":[]},{"level":3,"title":"CNavbarNav","slug":"cnavbarnav","link":"#cnavbarnav","children":[]},{"level":3,"title":"CNavItem","slug":"cnavitem","link":"#cnavitem","children":[]},{"level":3,"title":"CNavLink","slug":"cnavlink","link":"#cnavlink","children":[]},{"level":3,"title":"CNavTitle","slug":"cnavtitle","link":"#cnavtitle","children":[]},{"level":3,"title":"COffcanvasTitle","slug":"coffcanvastitle","link":"#coffcanvastitle","children":[]},{"level":3,"title":"CPaginationItem","slug":"cpaginationitem","link":"#cpaginationitem","children":[]},{"level":3,"title":"CPlaceholder","slug":"cplaceholder","link":"#cplaceholder","children":[]},{"level":3,"title":"CSidebar","slug":"csidebar","link":"#csidebar","children":[]},{"level":3,"title":"CSpinner","slug":"cspinner","link":"#cspinner","children":[]},{"level":3,"title":"CToastClose","slug":"ctoastclose","link":"#ctoastclose","children":[]}]}],"filePathRelative":"migration/v5.md"}');
-export {
-  v5_html as comp,
-  data
-};
diff --git a/vue/docs/assets/validation.html-2QwCYaBH.js b/vue/docs/assets/validation.html-BZBLONBB.js
similarity index 64%
rename from vue/docs/assets/validation.html-2QwCYaBH.js
rename to vue/docs/assets/validation.html-BZBLONBB.js
index 486af9eac42..3305ee59219 100644
--- a/vue/docs/assets/validation.html-2QwCYaBH.js
+++ b/vue/docs/assets/validation.html-BZBLONBB.js
@@ -1,31 +1,32 @@
-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";
+import { _ as _export_sfc, g as ref, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, a as createStaticVNode, f as createTextVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {
-  data: () => {
-    return {
-      validatedCustom01: null,
-      validatedTooltip01: null
-    };
-  },
-  methods: {
-    handleSubmitCustom01(event) {
+  __name: "validation.html",
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const validatedCustom01 = ref();
+    const validatedTooltip01 = ref();
+    const handleSubmitCustom01 = (event) => {
       const form = event.currentTarget;
       if (form.checkValidity() === false) {
         event.preventDefault();
         event.stopPropagation();
       }
-      this.validatedCustom01 = true;
-    },
-    handleSubmitTooltip01(event) {
+      validatedCustom01.value = true;
+    };
+    const handleSubmitTooltip01 = (event) => {
       const form = event.currentTarget;
       if (form.checkValidity() === false) {
         event.preventDefault();
         event.stopPropagation();
       }
-      this.validatedTooltip01 = true;
-    }
+      validatedTooltip01.value = true;
+    };
+    const __returned__ = { validatedCustom01, validatedTooltip01, handleSubmitCustom01, handleSubmitTooltip01, ref };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
   }
 };
-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_1 = /* @__PURE__ */ createStaticVNode('<h2 id="example" tabindex="-1">Example <a class="anchor-link" href="#example">#</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: "",
@@ -33,19 +34,19 @@ const _hoisted_5 = /* @__PURE__ */ createBaseVNode("option", {
   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_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>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 class="token keyword">const</span> validatedCustom01 <span class="token operator">=</span> <span class="token function">ref</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">handleSubmitCustom01</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</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> 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">    validatedCustom01<span class="token punctuation">.</span>value <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></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>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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</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);
+}, "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_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">#</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_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">#</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" };
@@ -58,15 +59,15 @@ const _hoisted_30 = /* @__PURE__ */ createBaseVNode("option", { value: "2" }, "T
 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_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>\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">#</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);
+}, "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_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>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 class="token keyword">const</span> validatedTooltip01 <span class="token operator">=</span> <span class="token function">ref</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">handleSubmitTooltip01</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">event</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> 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>\n<span class="line">    validatedTooltip01<span class="token punctuation">.</span>value <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></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>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>validatedTooltip01<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>handleSubmitTooltip01<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 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> Looks good! <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> Looks good! <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>\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>validationTooltipUsername<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><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">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>CFormFeedback</span> <span class="token attr-name">tooltip</span> <span class="token attr-name">invalid</span><span class="token punctuation">&gt;</span></span> Please choose a username. <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> Please provide a valid city. <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> Please provide a valid city. <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> Please provide a valid zip. <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></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><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">#</a></h2><h3 id="css-variables" tabindex="-1">CSS variables <a class="anchor-link" href="#css-variables">#</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",
@@ -75,8 +76,7 @@ const _hoisted_45 = /* @__PURE__ */ createBaseVNode("h3", {
   /* @__PURE__ */ createTextVNode("SASS variables "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#sass-variables",
-    "aria-hidden": "true"
+    href: "#sass-variables"
   }, "#")
 ], -1);
 const _hoisted_46 = /* @__PURE__ */ createBaseVNode("h3", {
@@ -86,8 +86,7 @@ const _hoisted_46 = /* @__PURE__ */ createBaseVNode("h3", {
   /* @__PURE__ */ createTextVNode("SASS mixins "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#sass-mixins",
-    "aria-hidden": "true"
+    href: "#sass-mixins"
   }, "#")
 ], -1);
 const _hoisted_47 = /* @__PURE__ */ createBaseVNode("p", null, "Two mixins are combined, through our loop, to generate our form validation feedback styles.", -1);
@@ -98,8 +97,7 @@ const _hoisted_48 = /* @__PURE__ */ createBaseVNode("h3", {
   /* @__PURE__ */ createTextVNode("SASS maps "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#sass-maps",
-    "aria-hidden": "true"
+    href: "#sass-maps"
   }, "#")
 ], -1);
 const _hoisted_49 = /* @__PURE__ */ createBaseVNode("p", null, [
@@ -119,8 +117,7 @@ const _hoisted_51 = /* @__PURE__ */ createBaseVNode("h3", {
   /* @__PURE__ */ createTextVNode("SASS loops "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#sass-loops",
-    "aria-hidden": "true"
+    href: "#sass-loops"
   }, "#")
 ], -1);
 const _hoisted_52 = /* @__PURE__ */ createBaseVNode("p", null, [
@@ -148,8 +145,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_CForm, {
         class: "row g-3 needs-validation",
         novalidate: "",
-        validated: _ctx.validatedCustom01,
-        onSubmit: $options.handleSubmitCustom01
+        validated: $setup.validatedCustom01,
+        onSubmit: $setup.handleSubmitCustom01
       }, {
         default: withCtx(() => [
           createVNode(_component_CCol, { md: "4" }, {
@@ -294,7 +291,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           })
         ]),
         _: 1
-      }, 8, ["validated", "onSubmit"])
+      }, 8, ["validated"])
     ]),
     _hoisted_7,
     createBaseVNode("div", _hoisted_11, [
@@ -634,8 +631,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       createVNode(_component_CForm, {
         class: "row g-3 needs-validation",
         novalidate: "",
-        validated: _ctx.validatedTooltip01,
-        onSubmit: $options.handleSubmitTooltip01
+        validated: $setup.validatedTooltip01,
+        onSubmit: $setup.handleSubmitTooltip01
       }, {
         default: withCtx(() => [
           createVNode(_component_CCol, {
@@ -775,7 +772,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           })
         ]),
         _: 1
-      }, 8, ["validated", "onSubmit"])
+      }, 8, ["validated"])
     ]),
     _hoisted_40,
     createVNode(_component_ScssDocs, {
diff --git a/vue/docs/assets/virtual-scroller.html-eMrz1664.js b/vue/docs/assets/virtual-scroller.html-se47tihX.js
similarity index 71%
rename from vue/docs/assets/virtual-scroller.html-eMrz1664.js
rename to vue/docs/assets/virtual-scroller.html-se47tihX.js
index 297e8237e95..d3a4670908d 100644
--- a/vue/docs/assets/virtual-scroller.html-eMrz1664.js
+++ b/vue/docs/assets/virtual-scroller.html-se47tihX.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, f as createTextVNode, a as createStaticVNode, F as Fragment, h as renderList, t as toDisplayString } from "./app-DGOUrGv-.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", {
@@ -8,12 +8,11 @@ const _hoisted_2 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("Virtual scroll (10000 Items) "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#virtual-scroll-10000-items",
-    "aria-hidden": "true"
+    href: "#virtual-scroll-10000-items"
   }, "#")
 ], -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>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);
+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">#</a></h2><h3 id="cvirtualscroller" tabindex="-1">CVirtualScroller <a class="anchor-link" href="#cvirtualscroller">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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-CX3InA_E.js b/vue/docs/assets/widgets.html-DaxyknU_.js
similarity index 92%
rename from vue/docs/assets/widgets.html-CX3InA_E.js
rename to vue/docs/assets/widgets.html-DaxyknU_.js
index c4c79983958..218bc869997 100644
--- a/vue/docs/assets/widgets.html-CX3InA_E.js
+++ b/vue/docs/assets/widgets.html-DaxyknU_.js
@@ -1,4 +1,4 @@
-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";
+import { _ as _export_sfc, r as resolveComponent, o as openBlock, c as createElementBlock, b as createBaseVNode, d as createVNode, e as withCtx, f as createTextVNode, a as createStaticVNode } from "./app-DGOUrGv-.js";
 const _sfc_main = {};
 const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   id: "widgetstatsa",
@@ -7,8 +7,7 @@ const _hoisted_1 = /* @__PURE__ */ createBaseVNode("h2", {
   /* @__PURE__ */ createTextVNode("WidgetStatsA "),
   /* @__PURE__ */ createBaseVNode("a", {
     class: "anchor-link",
-    href: "#widgetstatsa",
-    "aria-hidden": "true"
+    href: "#widgetstatsa"
   }, "#")
 ], -1);
 const _hoisted_2 = { class: "docs-example rounded-top p-4" };
@@ -16,19 +15,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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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_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">#</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-highlighter="prismjs" data-ext="vue" data-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-highlighter="prismjs" data-ext="vue" data-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);
+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">#</a></h2><h3 id="cwidgetstatsa" tabindex="-1">CWidgetStatsA <a class="anchor-link" href="#cwidgetstatsa">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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">#</a></h3><div class="language-jsx line-numbers-mode" data-highlighter="prismjs" data-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">#</a></h4><table class="table table-striped table-api"><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">#</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 11e204e609e..18e619557cc 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/alert.html b/vue/docs/components/alert.html
index 4258f4d5b93..a3824f3253d 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/avatar.html b/vue/docs/components/avatar.html
index efa541995b8..449e86663b2 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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 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">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/badge.html b/vue/docs/components/badge.html
index b4954e40559..a8127b80976 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/breadcrumb.html b/vue/docs/components/breadcrumb.html
index 717ed7f4bc2..b424dbd387a 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/button-group.html b/vue/docs/components/button-group.html
index 626e1588613..436bfeef08e 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/button.html b/vue/docs/components/button.html
index e7f73cd0bb5..1f2ea825eaf 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/calendar.html b/vue/docs/components/calendar.html
index 89f6a96a824..ea095ed5bd4 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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 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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    })(window,document,'script','dataLayer','GTM-KX4JH47');</script><title>Vue Calendar Component | Vue UI Components · CoreUI</title><meta name="description" content="The Vue Calendar Component is a versatile, customizable tool for creating responsive calendars in Vue, supporting day, month, and year selection, and global locales.">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/callout.html b/vue/docs/components/callout.html
index 154f70dd7a6..4e9c1a7a292 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/card.html b/vue/docs/components/card.html
index 8ea8a04e4ac..88798cbca18 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/carousel.html b/vue/docs/components/carousel.html
index 9037448c556..e964d2ea13e 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/chart.html b/vue/docs/components/chart.html
index 92eeac97a63..101c6316fef 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/close-button.html b/vue/docs/components/close-button.html
index b222f84e783..94ff32bcede 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/collapse.html b/vue/docs/components/collapse.html
index 6f0521def49..cd278c462b1 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/dropdown.html b/vue/docs/components/dropdown.html
index 5caeb656123..811e627b674 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/footer.html b/vue/docs/components/footer.html
index 30f2d767a48..5da14857433 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/header.html b/vue/docs/components/header.html
index 6c5eb06d91f..80a02400a03 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/icon.html b/vue/docs/components/icon.html
index 4670251fc19..b498dc2ce8a 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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 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">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/image.html b/vue/docs/components/image.html
index 410e5a205b9..68a036b563a 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/link.html b/vue/docs/components/link.html
index 687be7ffca1..60da5fe25d5 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/list-group.html b/vue/docs/components/list-group.html
index 0b52374819c..c2e88974356 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/loading-button.html b/vue/docs/components/loading-button.html
index f5a81aa416a..2f23be51c60 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/modal.html b/vue/docs/components/modal.html
index 758fc603bb9..b8c96304b11 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/navbar.html b/vue/docs/components/navbar.html
index b206d703b91..798a575efb8 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/navs-tabs.html b/vue/docs/components/navs-tabs.html
index 4a20a753459..1051b7b21fd 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/offcanvas.html b/vue/docs/components/offcanvas.html
index e507f6799fd..73f6d4b8ece 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/pagination.html b/vue/docs/components/pagination.html
index 736b4be9188..0347119c58f 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/placeholder.html b/vue/docs/components/placeholder.html
index b0d1c6a67ca..7c45c2fae75 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/popover.html b/vue/docs/components/popover.html
index 1da91c965f4..4e88eb2f5e7 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/progress.html b/vue/docs/components/progress.html
index f2c8422a729..6e61e76d366 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/sidebar.html b/vue/docs/components/sidebar.html
index d8d9f6d84e1..f9d41fb2d60 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/smart-pagination.html b/vue/docs/components/smart-pagination.html
index 53762f207e4..a922f3cd6d5 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/smart-table.html b/vue/docs/components/smart-table.html
index 6747fbc60e0..c14bd27a01a 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/spinner.html b/vue/docs/components/spinner.html
index 2e2086c229d..3aef55d7f6d 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/table.html b/vue/docs/components/table.html
index de12b87f6a0..2df3a2c998b 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/tabs.html b/vue/docs/components/tabs.html
index b0c80b54003..9b2b7cc17e1 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/toast.html b/vue/docs/components/toast.html
index f2712779253..c46a8afe133 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/tooltip.html b/vue/docs/components/tooltip.html
index 683a2d3af91..92405e0cbee 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/virtual-scroller.html b/vue/docs/components/virtual-scroller.html
index c4f2d794e26..88e27a3c612 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/components/widgets.html b/vue/docs/components/widgets.html
index 276fcac35b9..d8eff769437 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/customize/css-variables.html b/vue/docs/customize/css-variables.html
index 044d6127cac..85b0f020ac9 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/customize/options.html b/vue/docs/customize/options.html
index 451ef11f85d..1c04dde95d5 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/customize/sass.html b/vue/docs/customize/sass.html
index 1ab9f0af366..b2bb86ee9fa 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/checkbox.html b/vue/docs/forms/checkbox.html
index 6b422056236..7e4bb585e33 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/checks-radios.html b/vue/docs/forms/checks-radios.html
index e9081f8134a..b5aff1babfd 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/date-picker.html b/vue/docs/forms/date-picker.html
index 4d5249510c3..6cee352e038 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/date-range-picker.html b/vue/docs/forms/date-range-picker.html
index 5ded1cbe8e5..a0a227406d1 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/floating-labels.html b/vue/docs/forms/floating-labels.html
index 402ee4ad8ab..1b2ba218c42 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/form-control.html b/vue/docs/forms/form-control.html
index 4f82503f8f4..13d32044274 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/input-group.html b/vue/docs/forms/input-group.html
index 82319656b01..95bd4071903 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/input.html b/vue/docs/forms/input.html
index 71b2338984c..254c5e17663 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/layout.html b/vue/docs/forms/layout.html
index 25d41fa5ce5..4fb028b4553 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/multi-select.html b/vue/docs/forms/multi-select.html
index 2157c38f20a..7bfb42c6ce4 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/overview.html b/vue/docs/forms/overview.html
index 0fa16015dc0..5ec4532fc57 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/radio.html b/vue/docs/forms/radio.html
index 85ca23b14b0..714d65ab9cb 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/range.html b/vue/docs/forms/range.html
index 34cb3653e20..67b5ae79d3e 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/rating.html b/vue/docs/forms/rating.html
index e4955ecffe1..c1c03f55b79 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/select.html b/vue/docs/forms/select.html
index 09f1b2f3228..cbd41eeef6b 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/switch.html b/vue/docs/forms/switch.html
index c2165bf9cbd..f30e9534515 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/textarea.html b/vue/docs/forms/textarea.html
index 54cbcee7371..ff12fdc4dc4 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/time-picker.html b/vue/docs/forms/time-picker.html
index 3b1a67ac2df..b15f0f6a997 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/forms/validation.html b/vue/docs/forms/validation.html
index 52e735502d2..5f52410a221 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/getting-started/accessibility.html b/vue/docs/getting-started/accessibility.html
index 9b8db0c8883..ce464633139 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/getting-started/introduction.html b/vue/docs/getting-started/introduction.html
index a8ef61bbcd3..2a57ec1a862 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/index.html b/vue/docs/index.html
index b8dd7058fa3..2a57ec1a862 100644
--- a/vue/docs/index.html
+++ b/vue/docs/index.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.15" />
     <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-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/layout/breakpoints.html b/vue/docs/layout/breakpoints.html
index 1978c347a51..74c82fdaa73 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/layout/columns.html b/vue/docs/layout/columns.html
index 1303f93b59e..7e457ef918b 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/layout/containers.html b/vue/docs/layout/containers.html
index 4b8c6c02be6..b4a76f64c2b 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/layout/grid.html b/vue/docs/layout/grid.html
index 975ba9451c5..cccd96149a3 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/layout/gutters.html b/vue/docs/layout/gutters.html
index f44690d9af5..abafda4d223 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/migration/v4.html b/vue/docs/migration/v4.html
index 7ac21fbfd67..7732a520f4f 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/migration/v5.html b/vue/docs/migration/v5.html
index 2b654285b69..cb03baa9c6a 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/templates/admin-dashboard.html b/vue/docs/templates/admin-dashboard.html
index 4305c54822e..8b617edd69d 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/templates/contents.html b/vue/docs/templates/contents.html
index 26cf9710c50..620331319a7 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/templates/customize.html b/vue/docs/templates/customize.html
index 764b6b1c215..53f38c020cd 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/templates/download.html b/vue/docs/templates/download.html
index 608348c7ad1..6bf3ee01140 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>
diff --git a/vue/docs/templates/installation.html b/vue/docs/templates/installation.html
index ceb5f70892d..2cc1638e749 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.14" />
+    <meta name="generator" content="VuePress 2.0.0-rc.15" />
     <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-CM2j93lE.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-CM2j93lE.css">
+    <link rel="preload" href="/vue/docs/assets/style-V4DqbpUk.css" as="style"><link rel="stylesheet" href="/vue/docs/assets/style-V4DqbpUk.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-BoHWg5jI.js" defer></script>
+    <script type="module" src="/vue/docs/assets/app-DGOUrGv-.js" defer></script>
   </body>
 </html>