@coreui/vue-pro 5.3.0 → 5.5.0

package/dist/esm/node_modules/@coreui/icons-vue/dist/index.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.es.js","sources":["../../../../../../../@coreui/icons-vue/dist/index.es.js"],"sourcesContent":["import { defineComponent, inject, computed, h, cloneVNode } from 'vue';\n\nconst CIcon = defineComponent({\n    name: 'CIcon',\n    props: {\n        /**\n         * Use `:icon=\"...\"` instead of\n         *\n         * @deprecated since version 3.0\n         */\n        content: {\n            type: [String, Array],\n            default: undefined,\n            required: false,\n        },\n        /**\n         * Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.\n         */\n        customClassName: {\n            type: [String, Array, Object],\n            default: undefined,\n            required: false,\n        },\n        /**\n         * Name of the icon placed in React object or SVG content.\n         */\n        icon: {\n            type: [String, Array],\n            default: undefined,\n            required: false,\n        },\n        /**\n         * Use `icon=\"...\"` instead of\n         *\n         * @deprecated since version 3.0\n         */\n        name: {\n            type: String,\n            default: undefined,\n            required: false,\n        },\n        /**\n         * Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.\n         */\n        size: {\n            type: String,\n            default: undefined,\n            required: false,\n            validator: (value) => {\n                return [\n                    'custom',\n                    'custom-size',\n                    'sm',\n                    'lg',\n                    'xl',\n                    'xxl',\n                    '3xl',\n                    '4xl',\n                    '5xl',\n                    '6xl',\n                    '7xl',\n                    '8xl',\n                    '9xl',\n                ].includes(value);\n            },\n        },\n        /**\n         * Title tag content.\n         */\n        title: {\n            type: String,\n            default: undefined,\n            required: false,\n        },\n        /**\n         * If defined component will be rendered using 'use' tag.\n         */\n        use: {\n            type: String,\n            default: undefined,\n            required: false,\n        },\n    },\n    setup(props, { attrs }) {\n        const icons = inject('icons');\n        const _icon = props.icon || props.content || props.name;\n        const toCamelCase = (str) => {\n            return str\n                .replace(/([-_][a-z0-9])/gi, ($1) => {\n                return $1.toUpperCase();\n            })\n                .replace(/-/gi, '');\n        };\n        const iconName = computed(() => _icon && typeof _icon === 'string' ? (_icon.includes('-') ? toCamelCase(_icon) : _icon) : '');\n        const titleCode = props.title ? `<title>${props.title}</title>` : 'undefined';\n        const code = computed(() => Array.isArray(_icon)\n            ? _icon\n            : typeof _icon === 'string' && iconName.value && icons[iconName.value]\n                ? icons[iconName.value]\n                : 'undefined');\n        const iconCode = Array.isArray(code.value) ? code.value[1] || code.value[0] : code.value;\n        const scale = Array.isArray(code.value) && code.value.length > 1 ? code.value[0] : '64 64';\n        const viewBox = attrs.viewBox || `0 0 ${scale}`;\n        const size = () => {\n            const addCustom = !props.size && (attrs.width || attrs.height);\n            return props.size === 'custom' || addCustom ? 'custom-size' : props.size;\n        };\n        const classNames = (() => {\n            return [props.customClassName || ['icon', { [`icon-${size()}`]: size() }], attrs.class];\n        })();\n        return () => props.use\n            ? h('svg', {\n                ...attrs,\n                xmlns: 'http://www.w3.org/2000/svg',\n                class: classNames,\n                role: 'img',\n            }, h('use', { href: props.use }))\n            : h('svg', {\n                ...attrs,\n                xmlns: 'http://www.w3.org/2000/svg',\n                class: classNames,\n                viewBox: viewBox,\n                innerHTML: `${titleCode}${iconCode}`,\n                role: 'img',\n            });\n    },\n});\n\nconst CIconSvg = defineComponent({\n    name: 'CIconSvg',\n    props: {\n        /**\n         * Use for replacing default CIconSvg component classes. Prop is overriding the 'size' prop.\n         */\n        customClassName: [String, Array, Object],\n        /**\n         * The height attribute defines the vertical length of an icon.\n         */\n        height: Number,\n        /**\n         * Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.\n         */\n        size: {\n            type: String,\n            validator: (value) => {\n                return [\n                    'custom',\n                    'custom-size',\n                    'sm',\n                    'lg',\n                    'xl',\n                    'xxl',\n                    '3xl',\n                    '4xl',\n                    '5xl',\n                    '6xl',\n                    '7xl',\n                    '8xl',\n                    '9xl',\n                ].includes(value);\n            },\n        },\n        /**\n         * Title tag content.\n         */\n        title: String,\n        /**\n         * The width attribute defines the horizontal length of an icon.\n         */\n        width: Number,\n    },\n    setup(props, { attrs, slots }) {\n        return () => slots.default &&\n            slots.default().map((slot) => cloneVNode(slot, {\n                'aria-hidden': true,\n                class: [\n                    props.customClassName || [\n                        'icon',\n                        {\n                            [`icon-${props.size}`]: props.size,\n                            [`icon-custom-size`]: props.height || props.width,\n                        },\n                        attrs.class,\n                    ],\n                ],\n                height: props.height,\n                focusable: 'false',\n                role: 'img',\n                width: props.width,\n                ...attrs,\n            }));\n    },\n});\n\nexport { CIcon, CIconSvg, CIcon as default };\n//# sourceMappingURL=index.es.js.map\n"],"names":[],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"index.es.js","sources":["../../../../../../../@coreui/icons-vue/dist/index.es.js"],"sourcesContent":["import { defineComponent, inject, ref, watch, computed, h, cloneVNode } from 'vue';\n\nconst CIcon = defineComponent({\n    name: 'CIcon',\n    props: {\n        /**\n         * Use `:icon=\"...\"` instead of\n         *\n         * @deprecated since version 3.0\n         */\n        content: {\n            type: [String, Array],\n            default: undefined,\n            required: false,\n        },\n        /**\n         * Use for replacing default CIcon component classes. Prop is overriding the 'size' prop.\n         */\n        customClassName: {\n            type: [String, Array, Object],\n            default: undefined,\n            required: false,\n        },\n        /**\n         * Name of the icon placed in React object or SVG content.\n         */\n        icon: {\n            type: [String, Array],\n            default: undefined,\n            required: false,\n        },\n        /**\n         * Use `icon=\"...\"` instead of\n         *\n         * @deprecated since version 3.0\n         */\n        name: {\n            type: String,\n            default: undefined,\n            required: false,\n        },\n        /**\n         * Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.\n         */\n        size: {\n            type: String,\n            default: undefined,\n            required: false,\n            validator: (value) => {\n                return [\n                    'custom',\n                    'custom-size',\n                    'sm',\n                    'lg',\n                    'xl',\n                    'xxl',\n                    '3xl',\n                    '4xl',\n                    '5xl',\n                    '6xl',\n                    '7xl',\n                    '8xl',\n                    '9xl',\n                ].includes(value);\n            },\n        },\n        /**\n         * Title tag content.\n         */\n        title: {\n            type: String,\n            default: undefined,\n            required: false,\n        },\n        /**\n         * If defined component will be rendered using 'use' tag.\n         */\n        use: {\n            type: String,\n            default: undefined,\n            required: false,\n        },\n    },\n    setup(props, { attrs }) {\n        const icons = inject('icons');\n        const _icon = ref(props.icon || props.content || props.name);\n        watch(() => props.icon, () => {\n            _icon.value = props.icon;\n        });\n        const toCamelCase = (str) => {\n            return str\n                .replace(/([-_][a-z0-9])/gi, ($1) => {\n                return $1.toUpperCase();\n            })\n                .replace(/-/gi, '');\n        };\n        const iconName = computed(() => _icon.value && typeof _icon.value === 'string'\n            ? _icon.value.includes('-')\n                ? toCamelCase(_icon.value)\n                : _icon.value\n            : '');\n        const titleCode = props.title ? `<title>${props.title}</title>` : 'undefined';\n        const code = computed(() => Array.isArray(_icon.value)\n            ? _icon.value\n            : typeof _icon.value === 'string' && iconName.value && icons[iconName.value]\n                ? icons[iconName.value]\n                : 'undefined');\n        const iconCode = computed(() => Array.isArray(code.value) ? code.value[1] || code.value[0] : code.value);\n        const scale = Array.isArray(code.value) && code.value.length > 1 ? code.value[0] : '64 64';\n        const viewBox = attrs.viewBox || `0 0 ${scale}`;\n        const size = () => {\n            const addCustom = !props.size && (attrs.width || attrs.height);\n            return props.size === 'custom' || addCustom ? 'custom-size' : props.size;\n        };\n        const classNames = (() => {\n            return [props.customClassName || ['icon', { [`icon-${size()}`]: size() }], attrs.class];\n        })();\n        return () => props.use\n            ? h('svg', {\n                ...attrs,\n                xmlns: 'http://www.w3.org/2000/svg',\n                class: classNames,\n                role: 'img',\n            }, h('use', { href: props.use }))\n            : h('svg', {\n                ...attrs,\n                xmlns: 'http://www.w3.org/2000/svg',\n                class: classNames,\n                viewBox: viewBox,\n                innerHTML: `${titleCode}${iconCode.value}`,\n                role: 'img',\n            });\n    },\n});\n\nconst CIconSvg = defineComponent({\n    name: 'CIconSvg',\n    props: {\n        /**\n         * Use for replacing default CIconSvg component classes. Prop is overriding the 'size' prop.\n         */\n        customClassName: [String, Array, Object],\n        /**\n         * The height attribute defines the vertical length of an icon.\n         */\n        height: Number,\n        /**\n         * Size of the icon. Available sizes: 'sm', 'lg', 'xl', 'xxl', '3xl...9xl', 'custom', 'custom-size'.\n         */\n        size: {\n            type: String,\n            validator: (value) => {\n                return [\n                    'custom',\n                    'custom-size',\n                    'sm',\n                    'lg',\n                    'xl',\n                    'xxl',\n                    '3xl',\n                    '4xl',\n                    '5xl',\n                    '6xl',\n                    '7xl',\n                    '8xl',\n                    '9xl',\n                ].includes(value);\n            },\n        },\n        /**\n         * Title tag content.\n         */\n        title: String,\n        /**\n         * The width attribute defines the horizontal length of an icon.\n         */\n        width: Number,\n    },\n    setup(props, { attrs, slots }) {\n        return () => slots.default &&\n            slots.default().map((slot) => cloneVNode(slot, {\n                'aria-hidden': true,\n                class: [\n                    props.customClassName || [\n                        'icon',\n                        {\n                            [`icon-${props.size}`]: props.size,\n                            [`icon-custom-size`]: props.height || props.width,\n                        },\n                        attrs.class,\n                    ],\n                ],\n                height: props.height,\n                focusable: 'false',\n                role: 'img',\n                width: props.width,\n                ...attrs,\n            }));\n    },\n});\n\nexport { CIcon, CIconSvg, CIcon as default };\n//# sourceMappingURL=index.es.js.map\n"],"names":[],"mappings":"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","x_google_ignoreList":[0]}

package/dist/esm/utils/ComponentProps.d.ts

@@ -0,0 +1,2 @@
+import { DefineComponent, ExtractPropTypes, ExtractPublicPropTypes } from 'vue';
+export type ComponentProps<T> = T extends DefineComponent<ExtractPropTypes<infer Props>, any, any> ? ExtractPublicPropTypes<Props> : never;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coreui/vue-pro",
-  "version": "5.3.0",
+  "version": "5.5.0",
   "description": "UI Components Library for Vue.js",
   "keywords": [
     "vue",
@@ -41,27 +41,27 @@
     "test:update": "jest --coverage --updateSnapshot"
   },
   "dependencies": {
-    "@coreui/coreui-pro": "^5.3.0",
+    "@coreui/coreui-pro": "^5.4.0",
     "@popperjs/core": "^2.11.8"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@types/jest": "^29.5.12",
+    "@types/jest": "^29.5.13",
     "@vue/test-utils": "^2.4.6",
     "@vue/vue3-jest": "29.2.6",
     "cross-env": "^7.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.19.0",
+    "rollup": "^4.22.4",
     "rollup-plugin-vue": "^6.0.0",
-    "ts-jest": "^29.2.3",
-    "typescript": "^5.5.4",
-    "vue": "^3.4.33",
+    "ts-jest": "^29.2.5",
+    "typescript": "^5.6.2",
+    "vue": "^3.5.8",
     "vue-types": "^5.1.3"
   },
   "peerDependencies": {
-    "vue": "^3.2.21"
+    "vue": "^3.5.0"
   }
 }

package/src/components/calendar/CCalendar.ts

@@ -21,6 +21,42 @@ import {
 const CCalendar = 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
      */
@@ -599,7 +635,10 @@ const CCalendar = defineComponent({
               weekDays.map(({ date }: { date: Date }) => {
                 return h(
                   'th',
-                  { class: 'calendar-cell' },
+                  {
+                    class: 'calendar-cell',
+                    abbr: date.toLocaleDateString(props.locale, { weekday: 'long' }),
+                  },
                   h(
                     'div',
                     {
@@ -634,6 +673,7 @@ const CCalendar = defineComponent({
                 maxDate.value,
                 props.disabledDates,
               )
+              const isSelected = isDateSelected(date, startDate.value, endDate.value)
               const current = week.days.some((day) => day.month === 'current')
               return h(
                 'tr',
@@ -649,10 +689,11 @@ const CCalendar = defineComponent({
                         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(),
@@ -677,6 +718,7 @@ const CCalendar = defineComponent({
                       maxDate.value,
                       props.disabledDates,
                     )
+                    const isSelected = isDateSelected(date, startDate.value, endDate.value)
                     return month === 'current' || props.showAdjacementDays
                       ? h(
                           'td',
@@ -695,7 +737,7 @@ const CCalendar = defineComponent({
                                   range:
                                     month === 'current' &&
                                     isDateInRange(date, startDate.value, endDate.value),
-                                  selected: isDateSelected(date, startDate.value, endDate.value),
+                                  selected: isSelected,
                                 }),
                                 [month]: true,
                                 today: month === 'current' && isToday(date),
@@ -708,6 +750,7 @@ const CCalendar = defineComponent({
                                 ? 0
                                 : -1,
                             title: date.toLocaleDateString(props.locale),
+                            ...(isSelected && { 'aria-selected': true }),
                             ...(props.selectionType === 'day' &&
                               (month === 'current' || props.selectAdjacementDays) && {
                                 onBlur: () => handleCalendarMouseLeave(),
@@ -754,6 +797,7 @@ const CCalendar = defineComponent({
                     maxDate.value,
                     props.disabledDates,
                   )
+                  const isSelected = isDateSelected(date, startDate.value, endDate.value)
                   return h(
                     'td',
                     {
@@ -761,7 +805,7 @@ const CCalendar = defineComponent({
                         'calendar-cell',
                         {
                           disabled: isDisabled,
-                          selected: isDateSelected(date, startDate.value, endDate.value),
+                          selected: isSelected,
                           'range-hover':
                             props.selectionType === 'month' &&
                             (hoverDate.value && selectEndDate
@@ -771,6 +815,7 @@ const CCalendar = defineComponent({
                         },
                       ],
                       tabindex: isDisabled ? -1 : 0,
+                      ...(isSelected && { 'aria-selected': true }),
                       ...(!isDisabled && {
                         onBlur: () => handleCalendarMouseLeave(),
                         onClick: () => handleCalendarClick(date),
@@ -798,6 +843,7 @@ const CCalendar = defineComponent({
                     maxDate.value,
                     props.disabledDates,
                   )
+                  const isSelected = isDateSelected(date, startDate.value, endDate.value)
                   return h(
                     'td',
                     {
@@ -805,7 +851,7 @@ const CCalendar = defineComponent({
                         'calendar-cell year',
                         {
                           disabled: isDisabled,
-                          selected: isDateSelected(date, startDate.value, endDate.value),
+                          selected: isSelected,
                           'range-hover':
                             props.selectionType === 'year' &&
                             (hoverDate.value && selectEndDate
@@ -815,6 +861,7 @@ const CCalendar = defineComponent({
                         },
                       ],
                       tabindex: isDisabled ? -1 : 0,
+                      ...(isSelected && { 'aria-selected': true }),
                       ...(!isDisabled && {
                         onBlur: () => handleCalendarMouseLeave(),
                         onClick: () => handleCalendarClick(date),
@@ -847,6 +894,7 @@ const CCalendar = defineComponent({
                 {
                   color: 'transparent',
                   size: 'sm',
+                  'aria-label': props.ariaNavPrevYearLabel,
                   onClick: () => handleNavigationOnClick('prev', true),
                 },
                 {
@@ -865,6 +913,7 @@ const CCalendar = defineComponent({
                   {
                     color: 'transparent',
                     size: 'sm',
+                    'aria-label': props.ariaNavPrevMonthLabel,
                     onClick: () => handleNavigationOnClick('prev'),
                   },
                   {
@@ -883,6 +932,7 @@ const CCalendar = defineComponent({
           'div',
           {
             class: 'calendar-nav-date',
+            'aria-live': 'polite',
             ...(props.navYearFirst && { style: { display: 'flex', justifyContent: 'center' } }),
           },
           [
@@ -925,6 +975,7 @@ const CCalendar = defineComponent({
                   {
                     color: 'transparent',
                     size: 'sm',
+                    'aria-label': props.ariaNavNextMonthLabel,
                     onClick: () => handleNavigationOnClick('next'),
                   },
                   {
@@ -942,6 +993,7 @@ const CCalendar = defineComponent({
                 {
                   color: 'transparent',
                   size: 'sm',
+                  'aria-label': props.ariaNavNextYearLabel,
                   onClick: () => handleNavigationOnClick('next', true),
                 },
                 {

package/src/components/calendar/utils.ts

@@ -19,10 +19,7 @@ export const convertToDateObject = (
     return convertIsoWeekToDate(date as string)
   }
 
-  const _date = new Date(Date.parse(date))
-  const userTimezoneOffset = _date.getTimezoneOffset() * 60_000
-
-  return new Date(_date.getTime() + userTimezoneOffset)
+  return new Date(Date.parse(date))
 }
 
 export const convertToLocalDate = (d: Date, locale: string, options = {}) =>

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

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

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

@@ -7,6 +7,42 @@ import { Color } from '../props'
 const CDatePicker = 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
      */
@@ -183,19 +219,19 @@ const CDatePicker = defineComponent({
     /**
      * Custom function to format the selected date into a string according to a custom format.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     inputDateFormat: Function,
     /**
      * Custom function to parse the input value into a valid Date object.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     inputDateParse: Function,
     /**
      * Defines the delay (in milliseconds) for the input field's onChange event.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     inputOnChangeDelay: {
       type: Number,

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

@@ -14,6 +14,42 @@ import { Color } from '../props'
 const CDateRangePicker = 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.
      */
@@ -216,19 +252,19 @@ const CDateRangePicker = defineComponent({
     /**
      * Custom function to format the selected date into a string according to a custom format.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     inputDateFormat: Function,
     /**
      * Custom function to parse the input value into a valid Date object.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     inputDateParse: Function,
     /**
      * Defines the delay (in milliseconds) for the input field's onChange event.
      *
-     * @since v5.0.0
+     * @since 5.0.0
      */
     inputOnChangeDelay: {
       type: Number,
@@ -788,7 +824,9 @@ const CDateRangePicker = defineComponent({
       h(
         CFormControlWrapper,
         {
-          describedby: attrs['aria-describedby'],
+          ...(typeof attrs['aria-describedby'] === 'string' && {
+            describedby: attrs['aria-describedby'],
+          }),
           feedback: props.feedback,
           feedbackInvalid: props.feedbackInvalid,
           feedbackValid: props.feedbackValid,
@@ -924,6 +962,10 @@ const CDateRangePicker = defineComponent({
                         h(
                           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',
@@ -997,7 +1039,7 @@ const CDateRangePicker = defineComponent({
                                   locale: props.locale,
                                   onChange: (_: any, __: any, date: Date) =>
                                     handleStartDateChange(date),
-                                  time: startDate.value && new Date(startDate.value),
+                                  ...(startDate.value && {time: new Date(startDate.value)}),
                                   variant: 'select',
                                 }),
                                 h(CTimePicker, {
@@ -1006,7 +1048,7 @@ const CDateRangePicker = defineComponent({
                                   locale: props.locale,
                                   onChange: (_: any, __: any, date: Date) =>
                                     handleEndDateChange(date),
-                                  time: endDate.value && new Date(endDate.value),
+                                  ...(endDate.value && {time: new Date(endDate.value)}),
                                   variant: 'select',
                                 }),
                               ]
@@ -1026,6 +1068,7 @@ const CDateRangePicker = defineComponent({
                                     index === 0
                                       ? handleStartDateChange(date)
                                       : handleEndDateChange(date),
+                                  // @ts-expect-error
                                   time:
                                     index === 0
                                       ? startDate.value && new Date(startDate.value)

package/src/components/dropdown/CDropdown.ts

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

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
+     * @since 5.0.0
      */
     navLink: {
       type: Boolean,

package/src/components/form/CFormControlWrapper.ts

@@ -4,6 +4,15 @@ import { CFormFloating } from './CFormFloating'
 import { CFormLabel } from './CFormLabel'
 import { CFormText } from './CFormText'
 
+import type { ComponentProps } from '../../utils/ComponentProps'
+
+interface CFormControlWrapperProps extends ComponentProps<typeof CFormControlValidation> {
+  floatingLabel?: string
+  id?: string
+  label?: string
+  text?: string
+}
+
 const CFormControlWrapper = defineComponent({
   name: 'CFormControlWrapper',
   inheritAttrs: false,
@@ -18,7 +27,9 @@ const CFormControlWrapper = defineComponent({
     /**
      * @ignore
      */
-    id: String,
+    id: {
+      type: String,
+    },
     /**
      * Add a caption for a component.
      *
@@ -32,7 +43,7 @@ const CFormControlWrapper = defineComponent({
      */
     text: String,
   },
-  setup(props, { slots }) {
+  setup(props: CFormControlWrapperProps, { slots }) {
     const formControlValidation = () =>
       h(
         CFormControlValidation,
@@ -41,7 +52,6 @@ const CFormControlWrapper = defineComponent({
           feedback: props.feedback,
           feedbackInvalid: props.feedbackInvalid,
           feedbackValid: props.feedbackValid,
-          floatingLabel: props.floatingLabel,
           invalid: props.invalid,
           tooltipFeedback: props.tooltipFeedback,
           valid: props.valid,

package/src/components/form/CFormInput.ts

@@ -130,7 +130,9 @@ const CFormInput = defineComponent({
       h(
         CFormControlWrapper,
         {
-          describedby: attrs['aria-describedby'],
+          ...(typeof attrs['aria-describedby'] === 'string' && {
+            describedby: attrs['aria-describedby'],
+          }),
           feedback: props.feedback,
           feedbackInvalid: props.feedbackInvalid,
           feedbackValid: props.feedbackValid,

package/src/components/form/CFormSelect.ts

@@ -119,7 +119,9 @@ const CFormSelect = defineComponent({
       h(
         CFormControlWrapper,
         {
-          describedby: attrs['aria-describedby'],
+          ...(typeof attrs['aria-describedby'] === 'string' && {
+            describedby: attrs['aria-describedby'],
+          }),
           feedback: props.feedback,
           feedbackInvalid: props.feedbackInvalid,
           feedbackValid: props.feedbackValid,

package/src/components/form/CFormTextarea.ts

@@ -106,7 +106,9 @@ const CFormTextarea = defineComponent({
       h(
         CFormControlWrapper,
         {
-          describedby: attrs['aria-describedby'],
+          ...(typeof attrs['aria-describedby'] === 'string' && {
+            describedby: attrs['aria-describedby'],
+          }),
           feedback: props.feedback,
           feedbackInvalid: props.feedbackInvalid,
           feedbackValid: props.feedbackValid,

package/src/components/header/CHeader.ts

@@ -3,6 +3,13 @@ import { defineComponent, h } from 'vue'
 const CHeader = defineComponent({
   name: 'CHeader',
   props: {
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    as: {
+      type: String,
+      default: 'div',
+    },
     /**
      * Defines optional container wrapping children elements.
      *
@@ -31,7 +38,7 @@ const CHeader = defineComponent({
   setup(props, { slots }) {
     return () =>
       h(
-        'div',
+        props.as,
         { class: ['header', { [`header-${props.position}`]: props.position }] },
         props.container
           ? h(

package/src/components/header/__tests__/CHeader.spec.ts

@@ -20,6 +20,15 @@ const customWrapper = mount(Component, {
   },
 })
 
+const customWrapperTwo = mount(Component, {
+  propsData: {
+    as: 'header',
+  },
+  slots: {
+    default: 'Default slot',
+  },
+})
+
 describe(`Loads and display ${ComponentName} component`, () => {
   it('has a name', () => {
     expect(Component.name).toMatch(ComponentName)
@@ -44,3 +53,13 @@ describe(`Customize ${ComponentName} component`, () => {
     expect(customWrapper.find('.container-lg').classes('container-lg')).toBe(true)
   })
 })
+
+
+describe(`Customize (number two) ${ComponentName} component`, () => {
+  it('renders correctly', () => {
+    expect(customWrapperTwo.html()).toMatchSnapshot()
+  })
+  it('tag name is custom', () => {
+    expect(customWrapperTwo.element.tagName).toBe('HEADER')
+  })
+})