@coreui/vue-pro 5.0.0-beta.1 → 5.0.0-rc.0

package/src/components/avatar/CAvatar.ts

@@ -55,7 +55,7 @@ const CAvatar = defineComponent({
     /**
      * Sets the text color of the component to one of CoreUI’s themed colors.
      *
-     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'white', 'muted', 'high-emphasis', 'medium-emphasis', 'disabled', 'high-emphasis-inverse', 'medium-emphasis-inverse', 'disabled-inverse'
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'primary-emphasis', 'secondary-emphasis', 'success-emphasis', 'danger-emphasis', 'warning-emphasis', 'info-emphasis', 'light-emphasis', 'body', 'body-emphasis', 'body-secondary', 'body-tertiary', 'black', 'black-50', 'white', 'white-50'
      */
     textColor: TextColor,
   },

package/src/components/badge/CBadge.ts

@@ -49,7 +49,7 @@ const CBadge = defineComponent({
     /**
      * Sets the text color of the component to one of CoreUI’s themed colors.
      *
-     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'white', 'muted', 'high-emphasis', 'medium-emphasis', 'disabled', 'high-emphasis-inverse', 'medium-emphasis-inverse', 'disabled-inverse'
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'primary-emphasis', 'secondary-emphasis', 'success-emphasis', 'danger-emphasis', 'warning-emphasis', 'info-emphasis', 'light-emphasis', 'body', 'body-emphasis', 'body-secondary', 'body-tertiary', 'black', 'black-50', 'white', 'white-50'
      */
     textColor: TextColor,
   },

package/src/components/breadcrumb/__tests__/__snapshots__/CBreadcrumb.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Loads and display CBreadcrumb component renders correctly 1`] = `
-"<nav aria-label="breadcrumb" class="bazinga">
+"<nav aria-label="breadcrumb">
   <ol class="breadcrumb bazinga">Default slot</ol>
 </nav>"
 `;

package/src/components/button/__tests__/__snapshots__/CButton.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize (number two) CButton component renders correctly 1`] = `"<a class="btn btn-warning disabled" disabled="false" aria-disabled="true" tabindex="-1">Default slot</a>"`;
+exports[`Customize (number two) CButton component renders correctly 1`] = `"<a class="btn btn-warning disabled" aria-disabled="true" tabindex="-1">Default slot</a>"`;
 
-exports[`Customize CButton component renders correctly 1`] = `"<div class="btn btn-outline-warning btn-lg active disabled rounded-pill" disabled="true">Default slot</div>"`;
+exports[`Customize CButton component renders correctly 1`] = `"<a class="btn btn-outline-warning btn-lg active disabled rounded-pill" aria-disabled="true" tabindex="-1" href="/bazinga">Default slot</a>"`;
 
 exports[`Loads and display CButton component renders correctly 1`] = `"<button class="btn btn-undefined" type="button">Default slot</button>"`;

package/src/components/calendar/CCalendar.ts

@@ -124,7 +124,7 @@ const CCalendar = defineComponent({
     /**
      * Specify the type of date selection as day, week, month, or year.
      *
-     * @since 5.0.0-beta.1
+     * @since 5.0.0-rc.0
      */
     selectionType: {
       type: String as PropType<'day' | 'week' | 'month' | 'year'>,
@@ -143,7 +143,7 @@ const CCalendar = defineComponent({
     /**
      * Set whether to display week numbers in the calendar.
      *
-     * @since 5.0.0-beta.1
+     * @since 5.0.0-rc.0
      */
     showWeekNumber: Boolean,
     /**
@@ -174,7 +174,7 @@ const CCalendar = defineComponent({
     /**
      * Label displayed over week numbers in the calendar.
      *
-     * @since 5.0.0-beta.1
+     * @since 5.0.0-rc.0
      */
     weekNumbersLabel: String,
   },

package/src/components/card/CCard.ts

@@ -14,7 +14,7 @@ const CCard = defineComponent({
     /**
      * Sets the text color context of the component to one of CoreUI’s themed colors.
      *
-     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'white', 'muted', 'high-emphasis', 'medium-emphasis', 'disabled', 'high-emphasis-inverse', 'medium-emphasis-inverse', 'disabled-inverse'
+     * @values 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'primary-emphasis', 'secondary-emphasis', 'success-emphasis', 'danger-emphasis', 'warning-emphasis', 'info-emphasis', 'light-emphasis', 'body', 'body-emphasis', 'body-secondary', 'body-tertiary', 'black', 'black-50', 'white', 'white-50'
      */
     textColor: TextColor,
   },

package/src/components/carousel/__tests__/__snapshots__/CCarousel.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize CCarousel component renders correctly 1`] = `
-"<div class="carousel slide carousel-fade carousel-dark">
+"<div class="carousel slide carousel-fade" data-coreui-theme="dark">
   <div class="carousel-indicators"></div>
   <div class="carousel-inner"></div><button type="button" class="carousel-control-prev" data-coreui-target=""><span class="carousel-control-prev-icon" ariahidden="true"></span><span class="visually-hidden">Previous</span></button><button type="button" class="carousel-control-next" data-coreui-target=""><span class="carousel-control-next-icon" ariahidden="true"></span><span class="visually-hidden">Next</span></button>
 </div>"

package/src/components/conditional-teleport/CConditionalTeleport.ts

@@ -16,12 +16,10 @@ const CConditionalTeleport = defineComponent({
     /**
      * An HTML element or function that returns a single element, with `document.body` as the default.
      *
-     * @since v5.0.0-beta.1
+     * @since v5.0.0-rc.0
      */
     container: {
-      type: [Object, String] as PropType<
-        HTMLElement | (() => HTMLElement) | string
-      >,
+      type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
       default: 'body',
     },
     /**

package/src/components/date-picker/CDatePicker.ts

@@ -183,19 +183,19 @@ const CDatePicker = defineComponent({
     /**
      * Custom function to format the selected date into a string according to a custom format.
      *
-     * @since v5.0.0-alpha.4
+     * @since v5.0.0-rc.0
      */
     inputDateFormat: Function,
     /**
      * Custom function to parse the input value into a valid Date object.
      *
-     * @since v5.0.0-alpha.4
+     * @since v5.0.0-rc.0
      */
     inputDateParse: Function,
     /**
      * Defines the delay (in milliseconds) for the input field's onChange event.
      *
-     * @since v5.0.0-alpha.4
+     * @since v5.0.0-rc.0
      */
     inputOnChangeDelay: {
       type: Number,
@@ -249,7 +249,7 @@ const CDatePicker = defineComponent({
     /**
      * Specify the type of date selection as day, week, month, or year.
      *
-     * @since 5.0.0-beta.1
+     * @since 5.0.0-rc.0
      */
     selectionType: {
       type: String as PropType<'day' | 'week' | 'month' | 'year'>,
@@ -268,7 +268,7 @@ const CDatePicker = defineComponent({
     /**
      * Set whether to display week numbers in the calendar.
      *
-     * @since 5.0.0-beta.1
+     * @since 5.0.0-rc.0
      */
     showWeekNumber: Boolean,
     /**
@@ -311,7 +311,7 @@ const CDatePicker = defineComponent({
     /**
      * Label displayed over week numbers in the calendar.
      *
-     * @since 5.0.0-beta.1
+     * @since 5.0.0-rc.0
      */
     weekNumbersLabel: String,
   },

package/src/components/date-range-picker/CDateRangePicker.ts

@@ -214,19 +214,19 @@ const CDateRangePicker = defineComponent({
     /**
      * Custom function to format the selected date into a string according to a custom format.
      *
-     * @since v5.0.0-alpha.4
+     * @since v5.0.0-rc.0
      */
     inputDateFormat: Function,
     /**
      * Custom function to parse the input value into a valid Date object.
      *
-     * @since v5.0.0-alpha.4
+     * @since v5.0.0-rc.0
      */
     inputDateParse: Function,
     /**
      * Defines the delay (in milliseconds) for the input field's onChange event.
      *
-     * @since v5.0.0-alpha.4
+     * @since v5.0.0-rc.0
      */
     inputOnChangeDelay: {
       type: Number,
@@ -316,7 +316,7 @@ const CDateRangePicker = defineComponent({
     /**
      * Specify the type of date selection as day, week, month, or year.
      *
-     * @since 5.0.0-beta.1
+     * @since 5.0.0-rc.0
      */
     selectionType: {
       type: String as PropType<'day' | 'week' | 'month' | 'year'>,
@@ -335,7 +335,7 @@ const CDateRangePicker = defineComponent({
     /**
      * Set whether to display week numbers in the calendar.
      *
-     * @since 5.0.0-beta.1
+     * @since 5.0.0-rc.0
      */
     showWeekNumber: Boolean,
     /**
@@ -453,7 +453,7 @@ const CDateRangePicker = defineComponent({
     /**
      * Label displayed over week numbers in the calendar.
      *
-     * @since 5.0.0-beta.1
+     * @since 5.0.0-rc.0
      */
     weekNumbersLabel: String,
   },

package/src/components/dropdown/CDropdown.ts

@@ -62,12 +62,10 @@ const CDropdown = defineComponent({
     /**
      * Appends the vue dropdown menu to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
      *
-     * @since v5.0.0-beta.1
+     * @since v5.0.0-rc.0
      */
     container: {
-      type: [Object, String] as PropType<
-        HTMLElement | (() => HTMLElement) | string
-      >,
+      type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
       default: 'body',
     },
     /**
@@ -117,7 +115,7 @@ const CDropdown = defineComponent({
     /**
      * Generates dropdown menu using Teleport.
      *
-     * @since v5.0.0-beta.1
+     * @since v5.0.0-rc.0
      */
     teleport: {
       type: Boolean,

package/src/components/dropdown/CDropdownToggle.ts

@@ -49,7 +49,7 @@ const CDropdownToggle = defineComponent({
     /**
      * If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
      *
-     * @since v5.0.0-beta.1
+     * @since v5.0.0-rc.0
      */
     navLink: {
       type: Boolean,

package/src/components/dropdown/__tests__/__snapshots__/CDropdownMenu.spec.ts.snap

@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize CDropdownMenu component renders correctly 1`] = `
-"<ul class="dropdown-menu dropdown-menu-dark show dropdown-menu-lg-end" data-coreui-popper="static">
-  <li>Default slot</li>
-</ul>"
+"<!--teleport start-->
+<!--teleport end-->"
 `;
 
-exports[`Loads and display CDropdownMenu component renders correctly 1`] = `"<div class="dropdown-menu dropdown-menu-lg-end" data-coreui-popper="static">Default slot</div>"`;
+exports[`Loads and display CDropdownMenu component renders correctly 1`] = `
+"<!--teleport start-->
+<!--teleport end-->"
+`;

package/src/components/dropdown/__tests__/__snapshots__/CDropdownToggle.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CDropdownToggle component renders correctly 1`] = `"<a active="true" class="nav-link dropdown-toggle-split active disabled show" disabled="true" href="#">Default slot</a>"`;
+exports[`Customize CDropdownToggle component renders correctly 1`] = `"<a href="#" class="nav-link dropdown-toggle-split disabled show" aria-expanded="true" role="button" active="true">Default slot</a>"`;
 
-exports[`Loads and display CDropdownToggle component renders correctly 1`] = `"<button class="btn btn-outline-warning btn-lg active disabled rounded-pill dropdown-toggle dropdown-toggle-split active disabled show" disabled="" type="button"><span class="visually-hidden">Toggle Dropdown</span></button>"`;
+exports[`Loads and display CDropdownToggle component renders correctly 1`] = `"<button class="btn btn-outline-warning btn-lg active disabled rounded-pill dropdown-toggle dropdown-toggle-split disabled show" type="button" disabled="" aria-expanded="true"><span class="visually-hidden">Toggle Dropdown</span></button>"`;

package/src/components/form/__tests__/__snapshots__/CFormCheck.spec.ts.snap

@@ -2,12 +2,12 @@
 
 exports[`Customize with label - CFormCheck component renders correctly 1`] = `
 "<input class="btn-check is-invalid is-valid" id="uniqueid" type="checkbox">
-<label class="btn btn-outline-warning btn-lg rounded-circle" disabled="false" for="uniqueid">some label</label>"
+<label class="btn btn-outline-warning btn-lg rounded-circle" for="uniqueid">some label</label>"
 `;
 
 exports[`Customize with label in slot - CFormCheck component renders correctly 1`] = `
 "<input class="btn-check is-invalid is-valid" id="uniqueid" type="checkbox">
-<label class="btn btn-outline-warning btn-lg rounded-circle" disabled="false" for="uniqueid">some label</label>"
+<label class="btn btn-outline-warning btn-lg rounded-circle" for="uniqueid">some label</label>"
 `;
 
 exports[`Loads and display CFormCheck component renders correctly 1`] = `"<input class="form-check-input" type="checkbox">"`;

package/src/components/modal/CModal.ts

@@ -54,7 +54,7 @@ const CModal = defineComponent({
     /**
      * Puts the focus on the modal when shown.
      *
-     * @since v5.0.0-beta.1
+     * @since v5.0.0-rc.0
      */
     focus: {
       type: Boolean,

package/src/components/modal/__tests__/__snapshots__/CModal.spec.ts.snap

@@ -2,8 +2,8 @@
 
 exports[`Customize CModal component renders correctly 1`] = `
 "<transition-stub appear="false" persisted="false" css="false">
-  <div class="modal">
-    <div class="modal-dialog modal-dialog-centered modal-fullscreen-lg-down modal-dialog-scrollable modal-lg" role="dialog">
+  <div class="modal" aria-modal="true" role="dialog">
+    <div class="modal-dialog modal-dialog-centered modal-fullscreen-lg-down modal-dialog-scrollable modal-lg">
       <div class="modal-content bazinga">Default slot</div>
     </div>
   </div>
@@ -12,8 +12,8 @@ exports[`Customize CModal component renders correctly 1`] = `
 
 exports[`Loads and display CModal component renders correctly 1`] = `
 "<transition-stub appear="false" persisted="false" css="false">
-  <div class="modal fade">
-    <div class="modal-dialog modal-fullscreen" role="dialog">
+  <div class="modal fade" aria-modal="true" role="dialog">
+    <div class="modal-dialog modal-fullscreen">
       <div class="modal-content">Default slot</div>
     </div>
   </div>

package/src/components/navbar/__tests__/__snapshots__/CNavbar.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize CNavbar component renders correctly 1`] = `
-"<div class="navbar bg-warning navbar-light navbar-expand-xl fixed-bottom">
+"<div class="navbar bg-warning navbar-expand-xl fixed-bottom" data-coreui-theme="light">
   <div class="container-lg">Default slot</div>
 </div>"
 `;

package/src/components/offcanvas/__tests__/__snapshots__/COffcanvas.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Customize COffcanvas component renders correctly 1`] = `
-"<transition-stub appear="false" persisted="false" css="false">
+"<transition-stub appear="true" persisted="false" css="false">
   <div class="offcanvas offcanvas-bottom" role="dialog" tabindex="-1">Default slot</div>
 </transition-stub>
 <transition-stub appear="false" persisted="false" css="true" class="offcanvas-backdrop">
@@ -10,7 +10,7 @@ exports[`Customize COffcanvas component renders correctly 1`] = `
 `;
 
 exports[`Loads and display COffcanvas component renders correctly 1`] = `
-"<transition-stub appear="false" persisted="false" css="false">
+"<transition-stub appear="true" persisted="false" css="false">
   <div class="offcanvas offcanvas-end" role="dialog" tabindex="-1">Default slot</div>
 </transition-stub>
 <transition-stub appear="false" persisted="false" css="true" class="offcanvas-backdrop">

package/src/components/popover/CPopover.ts

@@ -23,7 +23,7 @@ const CPopover = defineComponent({
     /**
      * Appends the vue popover to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
      *
-     * @since v5.0.0-beta.1
+     * @since v5.0.0-rc.0
      */
     container: {
       type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,

package/src/components/progress/CProgress.ts

@@ -23,7 +23,7 @@ const CProgress = defineComponent({
     /**
      * A string of all className you want applied to the <CProgressBar/> component.
      *
-     * @since 5.0.0-beta.1
+     * @since 5.0.0-rc.0
      */
     progressBarClassName: String,
     /**

package/src/components/progress/__tests__/__snapshots__/CProgress.spec.ts.snap

@@ -1,5 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CProgress component renders correctly 1`] = `"<div class="progress progress-thin progress-white" style="height: 100px;">Default slot</div>"`;
+exports[`Customize CProgress component renders correctly 1`] = `
+"<div class="progress progress-thin progress-white" style="height: 100px;" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar bg-undefined" style="width: 0%;">Default slot</div>
+</div>"
+`;
 
-exports[`Loads and display CProgress component renders correctly 1`] = `"<div class="progress" style="">Default slot</div>"`;
+exports[`Loads and display CProgress component renders correctly 1`] = `
+"<div class="progress" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+  <div class="progress-bar bg-undefined" style="width: 0%;">Default slot</div>
+</div>"
+`;

package/src/components/progress/__tests__/__snapshots__/CProgressBar.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CProgressBar component renders correctly 1`] = `"<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">Default slot</div>"`;
+exports[`Customize CProgressBar component renders correctly 1`] = `"<div class="progress-bar bg-warning progress-bar-striped progress-bar-animated" style="width: 75%;">Default slot</div>"`;
 
-exports[`Loads and display CProgressBar component renders correctly 1`] = `"<div class="progress-bar bg-undefined" role="progressbar" style="width: 0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">Default slot</div>"`;
+exports[`Loads and display CProgressBar component renders correctly 1`] = `"<div class="progress-bar bg-undefined" style="width: 0%;">Default slot</div>"`;

package/src/components/sidebar/CSidebar.ts

@@ -70,7 +70,10 @@ const CSidebar = defineComponent({
     /**
      * Toggle the visibility of sidebar component.
      */
-    visible: Boolean,
+    visible: {
+      type: Boolean,
+      default: undefined,
+    },
   },
   emits: [
     /**
@@ -93,11 +96,9 @@ const CSidebar = defineComponent({
     const mobile = ref()
     const visibleMobile = ref(false)
     const visibleDesktop = ref(
-      props.visible !== undefined ? props.visible : props.overlaid ? false : true,
+      props.visible === undefined ? (props.overlaid ? false : true) : props.visible,
     )
 
-    // const visible = ref(props.visible)
-
     watch(inViewport, () => {
       emit('visible-change', inViewport.value)
       inViewport.value ? emit('show') : emit('hide')
@@ -194,7 +195,8 @@ const CSidebar = defineComponent({
               [`sidebar-${props.position}`]: props.position,
               [`sidebar-${props.size}`]: props.size,
               'sidebar-narrow-unfoldable': props.unfoldable,
-              show: (mobile.value && visibleMobile.value) || (props.overlaid && visibleDesktop.value),
+              show:
+                (mobile.value && visibleMobile.value) || (props.overlaid && visibleDesktop.value),
               hide: visibleDesktop.value === false && !mobile.value && !props.overlaid,
             },
             attrs.class,

package/src/components/sidebar/__tests__/__snapshots__/CSidebar.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CSidebar component renders correctly 1`] = `"<div class="sidebar sidebar-narrow sidebar-overlaid sidebar-fixed sidebar-xl sidebar-narrow-unfoldable">Default slot</div>"`;
+exports[`Customize CSidebar component renders correctly 1`] = `"<div class="sidebar sidebar-narrow sidebar-overlaid sidebar-fixed sidebar-xl sidebar-narrow-unfoldable show">Default slot</div>"`;
 
-exports[`Loads and display CSidebar component renders correctly 1`] = `"<div class="sidebar hide">Default slot</div>"`;
+exports[`Loads and display CSidebar component renders correctly 1`] = `"<div class="sidebar">Default slot</div>"`;

package/src/components/spinner/__tests__/__snapshots__/CSpinner.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CSpinner component renders correctly 1`] = `"<h4 class="spinner-grow text-warning spinner-grow-sm" role="status"><span class="visually-hidden">visuallyHiddenLabel</span></h4>"`;
+exports[`Customize CSpinner component renders correctly 1`] = `"<h4 class="spinner-grow spinner-grow-sm text-warning" role="status"><span class="visually-hidden">visuallyHiddenLabel</span></h4>"`;
 
-exports[`Loads and display CSpinner component renders correctly 1`] = `"<div class="spinner-border text-undefined" role="status"><span class="visually-hidden">Loading...</span></div>"`;
+exports[`Loads and display CSpinner component renders correctly 1`] = `"<div class="spinner-border" role="status"><span class="visually-hidden">Loading...</span></div>"`;

package/src/components/toast/CToaster.ts

@@ -31,7 +31,7 @@ const CToaster = defineComponent({
         'div',
         {
           class: [
-            'toaster toast-container p-3',
+            'toaster toast-container',
             {
               'position-fixed': props.placement,
               'top-0': props.placement && props.placement.includes('top'),

package/src/components/toast/__tests__/__snapshots__/CToaster.spec.ts.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Customize CToaster component renders correctly 1`] = `"<div class="toaster toast-container p-3 position-fixed top-0 end-0">Default slot</div>"`;
+exports[`Customize CToaster component renders correctly 1`] = `"<div class="toaster toast-container position-fixed top-0 end-0">Default slot</div>"`;
 
-exports[`Loads and display CToaster component renders correctly 1`] = `"<div class="toaster toast-container p-3">Default slot</div>"`;
+exports[`Loads and display CToaster component renders correctly 1`] = `"<div class="toaster toast-container">Default slot</div>"`;

package/src/components/tooltip/CTooltip.ts

@@ -23,12 +23,10 @@ const CTooltip = defineComponent({
     /**
      * Appends the vue tooltip to a specific element. You can pass an HTML element or function that returns a single element. By default `document.body`.
      *
-     * @since v5.0.0-beta.1
+     * @since v5.0.0-rc.0
      */
     container: {
-      type: [Object, String] as PropType<
-        HTMLElement | (() => HTMLElement) | string
-      >,
+      type: [Object, String] as PropType<HTMLElement | (() => HTMLElement) | string>,
       default: 'body',
     },
     /**

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsA.spec.ts.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Loads and display CWidgetStatsA component renders correctly 1`] = `
-"<div class="card bg-warning text-high-emphasis-inverse">
+"<div class="card bg-warning text-white">
   <div class="card-body pb-0 d-flex justify-content-between align-items-start">
     <div>
       <div class="fs-4 fw-semibold">75</div>

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsB.spec.ts.snap

@@ -1,13 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Loads and display CWidgetStatsB component renders correctly 1`] = `
-"<div class="card bg-warning text-high-emphasis-inverse">
+"<div class="card bg-warning text-white">
   <div class="card-body">
     <div class="fs-4 fw-semibold">75</div>
     <div>title</div>
-    <div class="progress progress-white my-2" style="height: 4px;">
-      <div class="progress-bar bg-info" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
-    </div><small class="text-medium-emphasis-inverse">text</small>
+    <div class="progress progress-white my-2" style="height: 4px;" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+      <div class="progress-bar bg-info" style="width: 75%;">
+        <!---->
+      </div>
+    </div><small class="text-white text-opacity-75">text</small>
   </div>
 </div>"
 `;

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsC.spec.ts.snap

@@ -3,11 +3,13 @@
 exports[`Loads and display CWidgetStatsC component renders correctly 1`] = `
 "<div class="card bg-warning text-white">
   <div class="card-body">
-    <div class="text-end mb-4 text-medium-emphasis-inverse">icon</div>
+    <div class="text-end mb-4 text-white text-opacity-75">icon</div>
     <div class="fs-4 fw-semibold">75</div>
-    <div class="text-uppercase fw-semibold small text-medium-emphasis-inverse">title</div>
-    <div class="progress progress-white my-2" style="height: 4px;">
-      <div class="progress-bar bg-info" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
+    <div class="text-uppercase fw-semibold small text-white text-opacity-75">title</div>
+    <div class="progress progress-white my-2" style="height: 4px;" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100">
+      <div class="progress-bar bg-info" style="width: 75%;">
+        <!---->
+      </div>
     </div>
   </div>
 </div>"

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsD.spec.ts.snap

@@ -7,12 +7,12 @@ exports[`Loads and display CWidgetStatsD component renders correctly 1`] = `
     <!---->
     <div class="col">
       <div class="col fs-5 fw-semibold">bb</div>
-      <div class="col text-uppercase text-medium-emphasis small">aa</div>
+      <div class="col text-uppercase text-body-secondary small">aa</div>
     </div>
     <div class="vr"></div>
     <div class="col">
       <div class="col fs-5 fw-semibold">dd</div>
-      <div class="col text-uppercase text-medium-emphasis small">cc</div>
+      <div class="col text-uppercase text-body-secondary small">cc</div>
     </div>
   </div>
 </div>"

package/src/components/widgets/__tests__/__snapshots__/CWidgetStatsF.spec.ts.snap

@@ -6,7 +6,7 @@ exports[`Loads and display CWidgetStatsF component renders correctly 1`] = `
     <div class="me-3 text-white bg-warning p-3">default</div>
     <div>
       <div class="fs-6 fw-semibold text-warning">75</div>
-      <div class="text-medium-emphasis text-uppercase fw-semibold small">title</div>
+      <div class="text-body-secondary text-uppercase fw-semibold small">title</div>
     </div>
   </div>
   <div class="card-footer">footer</div>

package/src/props.ts

@@ -65,14 +65,21 @@ export const TextColor = {
       'info',
       'dark',
       'light',
+      'primary-emphasis',
+      'secondary-emphasis',
+      'success-emphasis',
+      'danger-emphasis',
+      'warning-emphasis',
+      'info-emphasis',
+      'light-emphasis',
+      'body',
+      'body-emphasis',
+      'body-secondary',
+      'body-tertiary',
+      'black',
+      'black-50',
       'white',
-      'muted',
-      'high-emphasis',
-      'medium-emphasis',
-      'disabled',
-      'high-emphasis-inverse',
-      'medium-emphasis-inverse',
-      'disabled-inverse',
+      'white-50',
     ].includes(value)
   },
 }

package/src/shims-vue.d.ts

@@ -1,12 +1,5 @@
-/*
 declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
+  import { DefineComponent } from 'vue'
   const component: DefineComponent<{}, {}, any>
   export default component
 }
-*/
-declare module '*.vue' {
-  import { DefineComponent } from 'vue';
-  const component: DefineComponent<{}, {}, any>;
-  export default component;
-}