diff --git a/CHANGELOG.md b/CHANGELOG.md
index fe4b9e997..b7f8bf4a1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,37 @@
 # Changelog
 
+## [3.52.0](https://github.com/primefaces/primevue/tree/3.52.0) (2024-04-26)
+
+[Full Changelog](https://github.com/primefaces/primevue/compare/3.51.0...3.52.0)
+
+**Fixed bugs:**
+
+-   InputOp: Digits only doesn't work on mobile [\#5635](https://github.com/primefaces/primevue/issues/5635)
+-   Calendar: Hours are set to 00 when clicking the "Today" button [\#5620](https://github.com/primefaces/primevue/issues/5620)
+-   Paginator: Responsive Templating showing multiple layouts on break points [\#5604](https://github.com/primefaces/primevue/issues/5604)
+-   InputNumber: The InputNumber is not working properly in the new version [\#5602](https://github.com/primefaces/primevue/issues/5602)
+-   Menu / Stepper: Pass Through Unstyled Mode [\#5599](https://github.com/primefaces/primevue/issues/5599)
+-   Hydration defects [\#5593](https://github.com/primefaces/primevue/issues/5593)
+-   InputNumber: Cannot input number 0 in Hungarian(QWERTZ) layout [\#5577](https://github.com/primefaces/primevue/issues/5577)
+-   Menu: support style property for submenuHeader item [\#5562](https://github.com/primefaces/primevue/issues/5562)
+-   InputNumber Not Working android [\#5545](https://github.com/primefaces/primevue/issues/5545)
+-   InputNumber: Cannot input numbers in AZERTY layout [\#5508](https://github.com/primefaces/primevue/issues/5508)
+-   DataTable: rowClass, rowStyle typing defects [\#5498](https://github.com/primefaces/primevue/issues/5498)
+-   DataTable: Modifying value of expendedRow is not reflected [\#5372](https://github.com/primefaces/primevue/issues/5372)
+-   InputNumber can't enter 0.0x using minFractionDigits/mode="currency" [\#5170](https://github.com/primefaces/primevue/issues/5170)
+-   Calendar: Input value is not updated when model is changed externally [\#4938](https://github.com/primefaces/primevue/issues/4938)
+
+**Implemented New Features and Enhancements:**
+
+-   AutoComplete: Enter does not submit form [\#5618](https://github.com/primefaces/primevue/issues/5618)
+-   Knob: Added valueTemplate function support [\#5616](https://github.com/primefaces/primevue/issues/5616)
+-   Tree: Missing Passthrough Options [\#5574](https://github.com/primefaces/primevue/issues/5574)
+-   Sidebar: dismissable prop can't be changed dynamically [\#5563](https://github.com/primefaces/primevue/issues/5563)
+-   TreeTable: filterField ignored [\#5525](https://github.com/primefaces/primevue/issues/5525)
+-   ScrollPanel: Errors in moveBar() when xBar and yBar attributes don't exist [\#5518](https://github.com/primefaces/primevue/issues/5518)
+-   Toast: Race condition on remove [\#5225](https://github.com/primefaces/primevue/issues/5225)
+-   Dropdown: aria-label missing from inner ul element [\#5277](https://github.com/primefaces/primevue/issues/5277)
+
 ## [3.51.0](https://github.com/primefaces/primevue/tree/3.51.0) (2024-04-04)
 
 [Full Changelog](https://github.com/primefaces/primevue/compare/3.50.0...3.51.0)
diff --git a/api-generator/components/fileupload.js b/api-generator/components/fileupload.js
index 3095158ca..47b238553 100644
--- a/api-generator/components/fileupload.js
+++ b/api-generator/components/fileupload.js
@@ -99,7 +99,7 @@ const FileUploadProps = [
         name: 'customUpload',
         type: 'boolean',
         default: 'false',
-        description: 'Whether to use the default upload or a manual implementation defined in uploadHandler callback. Defaults to PrimeVue Locale configuration.'
+        description: 'Whether to use the default upload or a manual implementation defined in uploadHandler callback.'
     },
     {
         name: 'showUploadButton',
diff --git a/api-generator/components/knob.js b/api-generator/components/knob.js
index fdc6a90f6..7c3302292 100644
--- a/api-generator/components/knob.js
+++ b/api-generator/components/knob.js
@@ -73,9 +73,9 @@ const KnobProps = [
     },
     {
         name: 'valueTemplate',
-        type: 'string',
+        type: 'function | string',
         default: '{value}',
-        description: 'Template string of the value.'
+        description: 'Template of the value.'
     },
     {
         name: 'tabindex',
diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index 4ceaeb456..a38fc94a1 100644
--- a/assets/menu/menu.json
+++ b/assets/menu/menu.json
@@ -89,6 +89,7 @@
                         {
                             "name": "FloatLabel",
                             "to": "/floatlabel"
+                            "to": "/floatlabel"
                         },
                         {
                             "name": "IconField",
@@ -451,6 +452,7 @@
                         {
                             "name": "MeterGroup",
                             "to": "/metergroup"
+                            "to": "/metergroup"
                         },
                         {
                             "name": "ScrollTop",
diff --git a/components/landing/TemplateSection.vue b/components/landing/TemplateSection.vue
index 6f67ea1b8..d554d0e8e 100644
--- a/components/landing/TemplateSection.vue
+++ b/components/landing/TemplateSection.vue
@@ -121,5 +121,3 @@ export default {
     }
 };
 </script>
-
-:style="{backgroundImage: imageBg('diamond')}">
diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue
index 4c1b448fd..f1664ef84 100755
--- a/components/lib/autocomplete/AutoComplete.vue
+++ b/components/lib/autocomplete/AutoComplete.vue
@@ -132,7 +132,7 @@
                     <slot name="header" :value="modelValue" :suggestions="visibleOptions"></slot>
                     <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :style="{ height: scrollHeight }" :items="visibleOptions" :tabindex="-1" :disabled="virtualScrollerDisabled" :pt="ptm('virtualScroller')">
                         <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
-                            <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" v-bind="ptm('list')">
+                            <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" :aria-label="listAriaLabel" v-bind="ptm('list')">
                                 <template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
                                     <li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" :class="cx('itemGroup')" role="option" v-bind="ptm('itemGroup')">
                                         <slot name="optiongroup" :option="option.optionGroup" :item="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
@@ -641,8 +641,6 @@ export default {
 
                 this.hide();
             }
-
-            event.preventDefault();
         },
         onEscapeKey(event) {
             this.overlayVisible && this.hide(true);
@@ -942,6 +940,9 @@ export default {
         selectedMessageText() {
             return this.hasSelectedOption ? this.selectionMessageText.replaceAll('{0}', this.multiple ? this.modelValue.length : '1') : this.emptySelectionMessageText;
         },
+        listAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.listLabel : undefined;
+        },
         focusedOptionId() {
             return this.focusedOptionIndex !== -1 ? `${this.id}_${this.focusedOptionIndex}` : null;
         },
diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
index cac23e68d..c8ad4607d 100755
--- a/components/lib/calendar/Calendar.vue
+++ b/components/lib/calendar/Calendar.vue
@@ -5,7 +5,2417 @@ export default {
     name: 'Calendar',
     extends: DatePicker,
     mounted() {
-        console.warn('Deprecated since v4. Use DatePicker component instead.');
+        this.d_id = this.d_id || UniqueComponentId();
+        this.createResponsiveStyle();
+        this.bindMatchMediaListener();
+
+        if (this.inline) {
+            this.overlay && this.overlay.setAttribute(this.attributeSelector, '');
+
+            if (!this.disabled) {
+                this.preventFocus = true;
+                this.initFocusableCell();
+            }
+        } else {
+            this.input.value = this.formatValue(this.modelValue);
+        }
+    },
+    updated() {
+        if (this.overlay) {
+            this.preventFocus = true;
+            setTimeout(this.updateFocus, 0);
+        }
+
+        if (this.input && this.selectionStart != null && this.selectionEnd != null) {
+            this.input.selectionStart = this.selectionStart;
+            this.input.selectionEnd = this.selectionEnd;
+            this.selectionStart = null;
+            this.selectionEnd = null;
+        }
+    },
+    beforeUnmount() {
+        if (this.timePickerTimer) {
+            clearTimeout(this.timePickerTimer);
+        }
+
+        if (this.mask) {
+            this.destroyMask();
+        }
+
+        this.destroyResponsiveStyleElement();
+
+        this.unbindOutsideClickListener();
+        this.unbindResizeListener();
+        this.unbindMatchMediaListener();
+
+        if (this.scrollHandler) {
+            this.scrollHandler.destroy();
+            this.scrollHandler = null;
+        }
+
+        if (this.overlay && this.autoZIndex) {
+            ZIndexUtils.clear(this.overlay);
+        }
+
+        this.overlay = null;
+    },
+    methods: {
+        isComparable() {
+            return this.modelValue != null && typeof this.modelValue !== 'string';
+        },
+        isSelected(dateMeta) {
+            if (!this.isComparable()) {
+                return false;
+            }
+
+            if (this.modelValue) {
+                if (this.isSingleSelection()) {
+                    return this.isDateEquals(this.modelValue, dateMeta);
+                } else if (this.isMultipleSelection()) {
+                    let selected = false;
+
+                    for (let date of this.modelValue) {
+                        selected = this.isDateEquals(date, dateMeta);
+
+                        if (selected) {
+                            break;
+                        }
+                    }
+
+                    return selected;
+                } else if (this.isRangeSelection()) {
+                    if (this.modelValue[1]) return this.isDateEquals(this.modelValue[0], dateMeta) || this.isDateEquals(this.modelValue[1], dateMeta) || this.isDateBetween(this.modelValue[0], this.modelValue[1], dateMeta);
+                    else {
+                        return this.isDateEquals(this.modelValue[0], dateMeta);
+                    }
+                }
+            }
+
+            return false;
+        },
+        isMonthSelected(month) {
+            if (this.isComparable()) {
+                let value = this.isRangeSelection() ? this.modelValue[0] : this.modelValue;
+
+                if (this.isMultipleSelection()) {
+                    return value.some((currentValue) => currentValue.getMonth() === month && currentValue.getFullYear() === this.currentYear);
+                } else {
+                    return value.getMonth() === month && value.getFullYear() === this.currentYear;
+                }
+            }
+
+            return false;
+        },
+        isYearSelected(year) {
+            if (this.isComparable()) {
+                let value = this.isRangeSelection() ? this.modelValue[0] : this.modelValue;
+
+                if (this.isMultipleSelection()) {
+                    return value.some((currentValue) => currentValue.getFullYear() === year);
+                } else {
+                    return value.getFullYear() === year;
+                }
+            }
+
+            return false;
+        },
+        isDateEquals(value, dateMeta) {
+            if (value) return value.getDate() === dateMeta.day && value.getMonth() === dateMeta.month && value.getFullYear() === dateMeta.year;
+            else return false;
+        },
+        isDateBetween(start, end, dateMeta) {
+            let between = false;
+
+            if (start && end) {
+                let date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
+
+                return start.getTime() <= date.getTime() && end.getTime() >= date.getTime();
+            }
+
+            return between;
+        },
+        getFirstDayOfMonthIndex(month, year) {
+            let day = new Date();
+
+            day.setDate(1);
+            day.setMonth(month);
+            day.setFullYear(year);
+
+            let dayIndex = day.getDay() + this.sundayIndex;
+
+            return dayIndex >= 7 ? dayIndex - 7 : dayIndex;
+        },
+        getDaysCountInMonth(month, year) {
+            return 32 - this.daylightSavingAdjust(new Date(year, month, 32)).getDate();
+        },
+        getDaysCountInPrevMonth(month, year) {
+            let prev = this.getPreviousMonthAndYear(month, year);
+
+            return this.getDaysCountInMonth(prev.month, prev.year);
+        },
+        getPreviousMonthAndYear(month, year) {
+            let m, y;
+
+            if (month === 0) {
+                m = 11;
+                y = year - 1;
+            } else {
+                m = month - 1;
+                y = year;
+            }
+
+            return { month: m, year: y };
+        },
+        getNextMonthAndYear(month, year) {
+            let m, y;
+
+            if (month === 11) {
+                m = 0;
+                y = year + 1;
+            } else {
+                m = month + 1;
+                y = year;
+            }
+
+            return { month: m, year: y };
+        },
+        daylightSavingAdjust(date) {
+            if (!date) {
+                return null;
+            }
+
+            date.setHours(date.getHours() > 12 ? date.getHours() + 2 : 0);
+
+            return date;
+        },
+        isToday(today, day, month, year) {
+            return today.getDate() === day && today.getMonth() === month && today.getFullYear() === year;
+        },
+        isSelectable(day, month, year, otherMonth) {
+            let validMin = true;
+            let validMax = true;
+            let validDate = true;
+            let validDay = true;
+
+            if (otherMonth && !this.selectOtherMonths) {
+                return false;
+            }
+
+            if (this.minDate) {
+                if (this.minDate.getFullYear() > year) {
+                    validMin = false;
+                } else if (this.minDate.getFullYear() === year) {
+                    if (this.minDate.getMonth() > month) {
+                        validMin = false;
+                    } else if (this.minDate.getMonth() === month) {
+                        if (this.minDate.getDate() > day) {
+                            validMin = false;
+                        }
+                    }
+                }
+            }
+
+            if (this.maxDate) {
+                if (this.maxDate.getFullYear() < year) {
+                    validMax = false;
+                } else if (this.maxDate.getFullYear() === year) {
+                    if (this.maxDate.getMonth() < month) {
+                        validMax = false;
+                    } else if (this.maxDate.getMonth() === month) {
+                        if (this.maxDate.getDate() < day) {
+                            validMax = false;
+                        }
+                    }
+                }
+            }
+
+            if (this.disabledDates) {
+                validDate = !this.isDateDisabled(day, month, year);
+            }
+
+            if (this.disabledDays) {
+                validDay = !this.isDayDisabled(day, month, year);
+            }
+
+            return validMin && validMax && validDate && validDay;
+        },
+        onOverlayEnter(el) {
+            el.setAttribute(this.attributeSelector, '');
+            const styles = this.touchUI ? { position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' } : !this.inline ? { position: 'absolute', top: '0', left: '0' } : undefined;
+
+            DomHandler.addStyles(el, styles);
+
+            if (this.autoZIndex) {
+                if (this.touchUI) ZIndexUtils.set('modal', el, this.baseZIndex || this.$primevue.config.zIndex.modal);
+                else ZIndexUtils.set('overlay', el, this.baseZIndex || this.$primevue.config.zIndex.overlay);
+            }
+
+            this.alignOverlay();
+            this.$emit('show');
+        },
+        onOverlayEnterComplete() {
+            this.bindOutsideClickListener();
+            this.bindScrollListener();
+            this.bindResizeListener();
+        },
+        onOverlayAfterLeave(el) {
+            if (this.autoZIndex) {
+                ZIndexUtils.clear(el);
+            }
+        },
+        onOverlayLeave() {
+            this.currentView = this.view;
+            this.unbindOutsideClickListener();
+            this.unbindScrollListener();
+            this.unbindResizeListener();
+            this.$emit('hide');
+
+            if (this.mask) {
+                this.disableModality();
+            }
+
+            this.overlay = null;
+        },
+        onPrevButtonClick(event) {
+            if (this.showOtherMonths) {
+                this.navigationState = { backward: true, button: true };
+                this.navBackward(event);
+            }
+        },
+        onNextButtonClick(event) {
+            if (this.showOtherMonths) {
+                this.navigationState = { backward: false, button: true };
+                this.navForward(event);
+            }
+        },
+        navBackward(event) {
+            event.preventDefault();
+
+            if (!this.isEnabled()) {
+                return;
+            }
+
+            if (this.currentView === 'month') {
+                this.decrementYear();
+                this.$emit('year-change', { month: this.currentMonth, year: this.currentYear });
+            } else if (this.currentView === 'year') {
+                this.decrementDecade();
+            } else {
+                if (event.shiftKey) {
+                    this.decrementYear();
+                } else {
+                    if (this.currentMonth === 0) {
+                        this.currentMonth = 11;
+                        this.decrementYear();
+                    } else {
+                        this.currentMonth--;
+                    }
+
+                    this.$emit('month-change', { month: this.currentMonth + 1, year: this.currentYear });
+                }
+            }
+        },
+        navForward(event) {
+            event.preventDefault();
+
+            if (!this.isEnabled()) {
+                return;
+            }
+
+            if (this.currentView === 'month') {
+                this.incrementYear();
+                this.$emit('year-change', { month: this.currentMonth, year: this.currentYear });
+            } else if (this.currentView === 'year') {
+                this.incrementDecade();
+            } else {
+                if (event.shiftKey) {
+                    this.incrementYear();
+                } else {
+                    if (this.currentMonth === 11) {
+                        this.currentMonth = 0;
+                        this.incrementYear();
+                    } else {
+                        this.currentMonth++;
+                    }
+
+                    this.$emit('month-change', { month: this.currentMonth + 1, year: this.currentYear });
+                }
+            }
+        },
+        decrementYear() {
+            this.currentYear--;
+        },
+        decrementDecade() {
+            this.currentYear = this.currentYear - 10;
+        },
+        incrementYear() {
+            this.currentYear++;
+        },
+        incrementDecade() {
+            this.currentYear = this.currentYear + 10;
+        },
+        switchToMonthView(event) {
+            this.currentView = 'month';
+            setTimeout(this.updateFocus, 0);
+            event.preventDefault();
+        },
+        switchToYearView(event) {
+            this.currentView = 'year';
+            setTimeout(this.updateFocus, 0);
+            event.preventDefault();
+        },
+        isEnabled() {
+            return !this.disabled && !this.readonly;
+        },
+        updateCurrentTimeMeta(date) {
+            let currentHour = date.getHours();
+
+            if (this.hourFormat === '12') {
+                this.pm = currentHour > 11;
+
+                if (currentHour >= 12) currentHour = currentHour == 12 ? 12 : currentHour - 12;
+                else currentHour = currentHour == 0 ? 12 : currentHour;
+            }
+
+            this.currentHour = Math.floor(currentHour / this.stepHour) * this.stepHour;
+            this.currentMinute = Math.floor(date.getMinutes() / this.stepMinute) * this.stepMinute;
+            this.currentSecond = Math.floor(date.getSeconds() / this.stepSecond) * this.stepSecond;
+        },
+        bindOutsideClickListener() {
+            if (!this.outsideClickListener) {
+                this.outsideClickListener = (event) => {
+                    if (this.overlayVisible && this.isOutsideClicked(event)) {
+                        this.overlayVisible = false;
+                    }
+                };
+
+                document.addEventListener('mousedown', this.outsideClickListener);
+            }
+        },
+        unbindOutsideClickListener() {
+            if (this.outsideClickListener) {
+                document.removeEventListener('mousedown', this.outsideClickListener);
+                this.outsideClickListener = null;
+            }
+        },
+        bindScrollListener() {
+            if (!this.scrollHandler) {
+                this.scrollHandler = new ConnectedOverlayScrollHandler(this.$refs.container, () => {
+                    if (this.overlayVisible) {
+                        this.overlayVisible = false;
+                    }
+                });
+            }
+
+            this.scrollHandler.bindScrollListener();
+        },
+        unbindScrollListener() {
+            if (this.scrollHandler) {
+                this.scrollHandler.unbindScrollListener();
+            }
+        },
+        bindResizeListener() {
+            if (!this.resizeListener) {
+                this.resizeListener = () => {
+                    if (this.overlayVisible && !DomHandler.isTouchDevice()) {
+                        this.overlayVisible = false;
+                    }
+                };
+
+                window.addEventListener('resize', this.resizeListener);
+            }
+        },
+        unbindResizeListener() {
+            if (this.resizeListener) {
+                window.removeEventListener('resize', this.resizeListener);
+                this.resizeListener = null;
+            }
+        },
+        bindMatchMediaListener() {
+            if (!this.matchMediaListener) {
+                const query = matchMedia(`(max-width: ${this.breakpoint})`);
+
+                this.query = query;
+                this.queryMatches = query.matches;
+
+                this.matchMediaListener = () => {
+                    this.queryMatches = query.matches;
+                    this.mobileActive = false;
+                };
+
+                this.query.addEventListener('change', this.matchMediaListener);
+            }
+        },
+        unbindMatchMediaListener() {
+            if (this.matchMediaListener) {
+                this.query.removeEventListener('change', this.matchMediaListener);
+                this.matchMediaListener = null;
+            }
+        },
+        isOutsideClicked(event) {
+            return !(this.$el.isSameNode(event.target) || this.isNavIconClicked(event) || this.$el.contains(event.target) || (this.overlay && this.overlay.contains(event.target)));
+        },
+        isNavIconClicked(event) {
+            return (this.previousButton && (this.previousButton.isSameNode(event.target) || this.previousButton.contains(event.target))) || (this.nextButton && (this.nextButton.isSameNode(event.target) || this.nextButton.contains(event.target)));
+        },
+        alignOverlay() {
+            if (this.touchUI) {
+                this.enableModality();
+            } else if (this.overlay) {
+                if (this.appendTo === 'self' || this.inline) {
+                    DomHandler.relativePosition(this.overlay, this.$el);
+                } else {
+                    if (this.view === 'date') {
+                        this.overlay.style.width = DomHandler.getOuterWidth(this.overlay) + 'px';
+                        this.overlay.style.minWidth = DomHandler.getOuterWidth(this.$el) + 'px';
+                    } else {
+                        this.overlay.style.width = DomHandler.getOuterWidth(this.$el) + 'px';
+                    }
+
+                    DomHandler.absolutePosition(this.overlay, this.$el);
+                }
+            }
+        },
+        onButtonClick() {
+            if (this.isEnabled()) {
+                if (!this.overlayVisible) {
+                    this.input.focus();
+                    this.overlayVisible = true;
+                } else {
+                    this.overlayVisible = false;
+                }
+            }
+        },
+        isDateDisabled(day, month, year) {
+            if (this.disabledDates) {
+                for (let disabledDate of this.disabledDates) {
+                    if (disabledDate.getFullYear() === year && disabledDate.getMonth() === month && disabledDate.getDate() === day) {
+                        return true;
+                    }
+                }
+            }
+
+            return false;
+        },
+        isDayDisabled(day, month, year) {
+            if (this.disabledDays) {
+                let weekday = new Date(year, month, day);
+                let weekdayNumber = weekday.getDay();
+
+                return this.disabledDays.indexOf(weekdayNumber) !== -1;
+            }
+
+            return false;
+        },
+        onMonthDropdownChange(value) {
+            this.currentMonth = parseInt(value);
+            this.$emit('month-change', { month: this.currentMonth + 1, year: this.currentYear });
+        },
+        onYearDropdownChange(value) {
+            this.currentYear = parseInt(value);
+            this.$emit('year-change', { month: this.currentMonth + 1, year: this.currentYear });
+        },
+        onDateSelect(event, dateMeta) {
+            if (this.disabled || !dateMeta.selectable) {
+                return;
+            }
+
+            DomHandler.find(this.overlay, 'table td span:not([data-p-disabled="true"])').forEach((cell) => (cell.tabIndex = -1));
+
+            if (event) {
+                event.currentTarget.focus();
+            }
+
+            if (this.isMultipleSelection() && this.isSelected(dateMeta)) {
+                let newValue = this.modelValue.filter((date) => !this.isDateEquals(date, dateMeta));
+
+                this.updateModel(newValue);
+            } else {
+                if (this.shouldSelectDate(dateMeta)) {
+                    if (dateMeta.otherMonth) {
+                        this.currentMonth = dateMeta.month;
+                        this.currentYear = dateMeta.year;
+                        this.selectDate(dateMeta);
+                    } else {
+                        this.selectDate(dateMeta);
+                    }
+                }
+            }
+
+            if (this.isSingleSelection() && (!this.showTime || this.hideOnDateTimeSelect)) {
+                setTimeout(() => {
+                    if (this.input) {
+                        this.input.focus();
+                    }
+
+                    this.overlayVisible = false;
+                }, 150);
+            }
+        },
+        selectDate(dateMeta) {
+            let date = new Date(dateMeta.year, dateMeta.month, dateMeta.day);
+
+            if (this.showTime) {
+                if (this.hourFormat === '12' && this.currentHour !== 12) {
+                    this.pm ? date.setHours(this.currentHour + 12) : date.setHours(this.currentHour);
+                }
+
+                date.setMinutes(this.currentMinute);
+                date.setSeconds(this.currentSecond);
+            }
+
+            if (this.minDate && this.minDate > date) {
+                date = this.minDate;
+                this.currentHour = date.getHours();
+                this.currentMinute = date.getMinutes();
+                this.currentSecond = date.getSeconds();
+            }
+
+            if (this.maxDate && this.maxDate < date) {
+                date = this.maxDate;
+                this.currentHour = date.getHours();
+                this.currentMinute = date.getMinutes();
+                this.currentSecond = date.getSeconds();
+            }
+
+            let modelVal = null;
+
+            if (this.isSingleSelection()) {
+                modelVal = date;
+            } else if (this.isMultipleSelection()) {
+                modelVal = this.modelValue ? [...this.modelValue, date] : [date];
+            } else if (this.isRangeSelection()) {
+                if (this.modelValue && this.modelValue.length) {
+                    let startDate = this.modelValue[0];
+                    let endDate = this.modelValue[1];
+
+                    if (!endDate && date.getTime() >= startDate.getTime()) {
+                        endDate = date;
+                    } else {
+                        startDate = date;
+                        endDate = null;
+                    }
+
+                    modelVal = [startDate, endDate];
+                } else {
+                    modelVal = [date, null];
+                }
+            }
+
+            if (modelVal !== null) {
+                this.updateModel(modelVal);
+            }
+
+            if (this.isRangeSelection() && this.hideOnRangeSelection && modelVal[1] !== null) {
+                setTimeout(() => {
+                    this.overlayVisible = false;
+                }, 150);
+            }
+
+            this.$emit('date-select', date);
+        },
+        updateModel(value) {
+            this.$emit('update:modelValue', value);
+        },
+        shouldSelectDate() {
+            if (this.isMultipleSelection()) return this.maxDateCount != null ? this.maxDateCount > (this.modelValue ? this.modelValue.length : 0) : true;
+            else return true;
+        },
+        isSingleSelection() {
+            return this.selectionMode === 'single';
+        },
+        isRangeSelection() {
+            return this.selectionMode === 'range';
+        },
+        isMultipleSelection() {
+            return this.selectionMode === 'multiple';
+        },
+        formatValue(value) {
+            if (typeof value === 'string') {
+                return value;
+            }
+
+            let formattedValue = '';
+
+            if (value) {
+                try {
+                    if (this.isSingleSelection()) {
+                        formattedValue = this.formatDateTime(value);
+                    } else if (this.isMultipleSelection()) {
+                        for (let i = 0; i < value.length; i++) {
+                            let dateAsString = this.formatDateTime(value[i]);
+
+                            formattedValue += dateAsString;
+
+                            if (i !== value.length - 1) {
+                                formattedValue += ', ';
+                            }
+                        }
+                    } else if (this.isRangeSelection()) {
+                        if (value && value.length) {
+                            let startDate = value[0];
+                            let endDate = value[1];
+
+                            formattedValue = this.formatDateTime(startDate);
+
+                            if (endDate) {
+                                formattedValue += ' - ' + this.formatDateTime(endDate);
+                            }
+                        }
+                    }
+                } catch (err) {
+                    formattedValue = value;
+                }
+            }
+
+            return formattedValue;
+        },
+        formatDateTime(date) {
+            let formattedValue = null;
+
+            if (date) {
+                if (this.timeOnly) {
+                    formattedValue = this.formatTime(date);
+                } else {
+                    formattedValue = this.formatDate(date, this.datePattern);
+
+                    if (this.showTime) {
+                        formattedValue += ' ' + this.formatTime(date);
+                    }
+                }
+            }
+
+            return formattedValue;
+        },
+        formatDate(date, format) {
+            if (!date) {
+                return '';
+            }
+
+            let iFormat;
+
+            const lookAhead = (match) => {
+                    const matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match;
+
+                    if (matches) {
+                        iFormat++;
+                    }
+
+                    return matches;
+                },
+                formatNumber = (match, value, len) => {
+                    let num = '' + value;
+
+                    if (lookAhead(match)) {
+                        while (num.length < len) {
+                            num = '0' + num;
+                        }
+                    }
+
+                    return num;
+                },
+                formatName = (match, value, shortNames, longNames) => {
+                    return lookAhead(match) ? longNames[value] : shortNames[value];
+                };
+
+            let output = '';
+            let literal = false;
+
+            if (date) {
+                for (iFormat = 0; iFormat < format.length; iFormat++) {
+                    if (literal) {
+                        if (format.charAt(iFormat) === "'" && !lookAhead("'")) {
+                            literal = false;
+                        } else {
+                            output += format.charAt(iFormat);
+                        }
+                    } else {
+                        switch (format.charAt(iFormat)) {
+                            case 'd':
+                                output += formatNumber('d', date.getDate(), 2);
+                                break;
+                            case 'D':
+                                output += formatName('D', date.getDay(), this.$primevue.config.locale.dayNamesShort, this.$primevue.config.locale.dayNames);
+                                break;
+                            case 'o':
+                                output += formatNumber('o', Math.round((new Date(date.getFullYear(), date.getMonth(), date.getDate()).getTime() - new Date(date.getFullYear(), 0, 0).getTime()) / 86400000), 3);
+                                break;
+                            case 'm':
+                                output += formatNumber('m', date.getMonth() + 1, 2);
+                                break;
+                            case 'M':
+                                output += formatName('M', date.getMonth(), this.$primevue.config.locale.monthNamesShort, this.$primevue.config.locale.monthNames);
+                                break;
+                            case 'y':
+                                output += lookAhead('y') ? date.getFullYear() : (date.getFullYear() % 100 < 10 ? '0' : '') + (date.getFullYear() % 100);
+                                break;
+                            case '@':
+                                output += date.getTime();
+                                break;
+                            case '!':
+                                output += date.getTime() * 10000 + this.ticksTo1970;
+                                break;
+                            case "'":
+                                if (lookAhead("'")) {
+                                    output += "'";
+                                } else {
+                                    literal = true;
+                                }
+
+                                break;
+                            default:
+                                output += format.charAt(iFormat);
+                        }
+                    }
+                }
+            }
+
+            return output;
+        },
+        formatTime(date) {
+            if (!date) {
+                return '';
+            }
+
+            let output = '';
+            let hours = date.getHours();
+            let minutes = date.getMinutes();
+            let seconds = date.getSeconds();
+
+            if (this.hourFormat === '12' && hours > 11 && hours !== 12) {
+                hours -= 12;
+            }
+
+            if (this.hourFormat === '12') {
+                output += hours === 0 ? 12 : hours < 10 ? '0' + hours : hours;
+            } else {
+                output += hours < 10 ? '0' + hours : hours;
+            }
+
+            output += ':';
+            output += minutes < 10 ? '0' + minutes : minutes;
+
+            if (this.showSeconds) {
+                output += ':';
+                output += seconds < 10 ? '0' + seconds : seconds;
+            }
+
+            if (this.hourFormat === '12') {
+                output += date.getHours() > 11 ? ` ${this.$primevue.config.locale.pm}` : ` ${this.$primevue.config.locale.am}`;
+            }
+
+            return output;
+        },
+        onTodayButtonClick(event) {
+            let date = new Date();
+            let dateMeta = {
+                day: date.getDate(),
+                month: date.getMonth(),
+                year: date.getFullYear(),
+                otherMonth: date.getMonth() !== this.currentMonth || date.getFullYear() !== this.currentYear,
+                today: true,
+                selectable: true
+            };
+
+            this.onDateSelect(null, dateMeta);
+            this.$emit('today-click', date);
+            event.preventDefault();
+        },
+        onClearButtonClick(event) {
+            this.updateModel(null);
+            this.overlayVisible = false;
+            this.$emit('clear-click', event);
+            event.preventDefault();
+        },
+        onTimePickerElementMouseDown(event, type, direction) {
+            if (this.isEnabled()) {
+                this.repeat(event, null, type, direction);
+                event.preventDefault();
+            }
+        },
+        onTimePickerElementMouseUp(event) {
+            if (this.isEnabled()) {
+                this.clearTimePickerTimer();
+                this.updateModelTime();
+                event.preventDefault();
+            }
+        },
+        onTimePickerElementMouseLeave() {
+            this.clearTimePickerTimer();
+        },
+        repeat(event, interval, type, direction) {
+            let i = interval || 500;
+
+            this.clearTimePickerTimer();
+            this.timePickerTimer = setTimeout(() => {
+                this.repeat(event, 100, type, direction);
+            }, i);
+
+            switch (type) {
+                case 0:
+                    if (direction === 1) this.incrementHour(event);
+                    else this.decrementHour(event);
+                    break;
+
+                case 1:
+                    if (direction === 1) this.incrementMinute(event);
+                    else this.decrementMinute(event);
+                    break;
+
+                case 2:
+                    if (direction === 1) this.incrementSecond(event);
+                    else this.decrementSecond(event);
+                    break;
+            }
+        },
+        convertTo24Hour(hours, pm) {
+            if (this.hourFormat == '12') {
+                if (hours === 12) {
+                    return pm ? 12 : 0;
+                } else {
+                    return pm ? hours + 12 : hours;
+                }
+            }
+
+            return hours;
+        },
+        validateTime(hour, minute, second, pm) {
+            let value = this.isComparable() ? this.modelValue : this.viewDate;
+            const convertedHour = this.convertTo24Hour(hour, pm);
+
+            if (this.isRangeSelection()) {
+                value = this.modelValue[1] || this.modelValue[0];
+            }
+
+            if (this.isMultipleSelection()) {
+                value = this.modelValue[this.modelValue.length - 1];
+            }
+
+            const valueDateString = value ? value.toDateString() : null;
+
+            if (this.minDate && valueDateString && this.minDate.toDateString() === valueDateString) {
+                if (this.minDate.getHours() > convertedHour) {
+                    return false;
+                }
+
+                if (this.minDate.getHours() === convertedHour) {
+                    if (this.minDate.getMinutes() > minute) {
+                        return false;
+                    }
+
+                    if (this.minDate.getMinutes() === minute) {
+                        if (this.minDate.getSeconds() > second) {
+                            return false;
+                        }
+                    }
+                }
+            }
+
+            if (this.maxDate && valueDateString && this.maxDate.toDateString() === valueDateString) {
+                if (this.maxDate.getHours() < convertedHour) {
+                    return false;
+                }
+
+                if (this.maxDate.getHours() === convertedHour) {
+                    if (this.maxDate.getMinutes() < minute) {
+                        return false;
+                    }
+
+                    if (this.maxDate.getMinutes() === minute) {
+                        if (this.maxDate.getSeconds() < second) {
+                            return false;
+                        }
+                    }
+                }
+            }
+
+            return true;
+        },
+        incrementHour(event) {
+            let prevHour = this.currentHour;
+            let newHour = this.currentHour + Number(this.stepHour);
+            let newPM = this.pm;
+
+            if (this.hourFormat == '24') newHour = newHour >= 24 ? newHour - 24 : newHour;
+            else if (this.hourFormat == '12') {
+                // Before the AM/PM break, now after
+                if (prevHour < 12 && newHour > 11) {
+                    newPM = !this.pm;
+                }
+
+                newHour = newHour >= 13 ? newHour - 12 : newHour;
+            }
+
+            if (this.validateTime(newHour, this.currentMinute, this.currentSecond, newPM)) {
+                this.currentHour = newHour;
+                this.pm = newPM;
+            }
+
+            event.preventDefault();
+        },
+        decrementHour(event) {
+            let newHour = this.currentHour - this.stepHour;
+            let newPM = this.pm;
+
+            if (this.hourFormat == '24') newHour = newHour < 0 ? 24 + newHour : newHour;
+            else if (this.hourFormat == '12') {
+                // If we were at noon/midnight, then switch
+                if (this.currentHour === 12) {
+                    newPM = !this.pm;
+                }
+
+                newHour = newHour <= 0 ? 12 + newHour : newHour;
+            }
+
+            if (this.validateTime(newHour, this.currentMinute, this.currentSecond, newPM)) {
+                this.currentHour = newHour;
+                this.pm = newPM;
+            }
+
+            event.preventDefault();
+        },
+        incrementMinute(event) {
+            let newMinute = this.currentMinute + Number(this.stepMinute);
+
+            if (this.validateTime(this.currentHour, newMinute, this.currentSecond, this.pm)) {
+                this.currentMinute = newMinute > 59 ? newMinute - 60 : newMinute;
+            }
+
+            event.preventDefault();
+        },
+        decrementMinute(event) {
+            let newMinute = this.currentMinute - this.stepMinute;
+
+            newMinute = newMinute < 0 ? 60 + newMinute : newMinute;
+
+            if (this.validateTime(this.currentHour, newMinute, this.currentSecond, this.pm)) {
+                this.currentMinute = newMinute;
+            }
+
+            event.preventDefault();
+        },
+        incrementSecond(event) {
+            let newSecond = this.currentSecond + Number(this.stepSecond);
+
+            if (this.validateTime(this.currentHour, this.currentMinute, newSecond, this.pm)) {
+                this.currentSecond = newSecond > 59 ? newSecond - 60 : newSecond;
+            }
+
+            event.preventDefault();
+        },
+        decrementSecond(event) {
+            let newSecond = this.currentSecond - this.stepSecond;
+
+            newSecond = newSecond < 0 ? 60 + newSecond : newSecond;
+
+            if (this.validateTime(this.currentHour, this.currentMinute, newSecond, this.pm)) {
+                this.currentSecond = newSecond;
+            }
+
+            event.preventDefault();
+        },
+        updateModelTime() {
+            this.timePickerChange = true;
+            let value = this.isComparable() ? this.modelValue : this.viewDate;
+
+            if (this.isRangeSelection()) {
+                value = this.modelValue[1] || this.modelValue[0];
+            }
+
+            if (this.isMultipleSelection()) {
+                value = this.modelValue[this.modelValue.length - 1];
+            }
+
+            value = value ? new Date(value.getTime()) : new Date();
+
+            if (this.hourFormat == '12') {
+                if (this.currentHour === 12) value.setHours(this.pm ? 12 : 0);
+                else value.setHours(this.pm ? this.currentHour + 12 : this.currentHour);
+            } else {
+                value.setHours(this.currentHour);
+            }
+
+            value.setMinutes(this.currentMinute);
+            value.setSeconds(this.currentSecond);
+
+            if (this.isRangeSelection()) {
+                if (this.modelValue[1]) value = [this.modelValue[0], value];
+                else value = [value, null];
+            }
+
+            if (this.isMultipleSelection()) {
+                value = [...this.modelValue.slice(0, -1), value];
+            }
+
+            this.updateModel(value);
+            this.$emit('date-select', value);
+            setTimeout(() => (this.timePickerChange = false), 0);
+        },
+        toggleAMPM(event) {
+            const validHour = this.validateTime(this.currentHour, this.currentMinute, this.currentSecond, !this.pm);
+
+            if (!validHour && (this.maxDate || this.minDate)) return;
+
+            this.pm = !this.pm;
+            this.updateModelTime();
+            event.preventDefault();
+        },
+        clearTimePickerTimer() {
+            if (this.timePickerTimer) {
+                clearInterval(this.timePickerTimer);
+            }
+        },
+        onMonthSelect(event, { month, index }) {
+            if (this.view === 'month') {
+                this.onDateSelect(event, { year: this.currentYear, month: index, day: 1, selectable: true });
+            } else {
+                this.currentMonth = index;
+                this.currentView = 'date';
+                this.$emit('month-change', { month: this.currentMonth + 1, year: this.currentYear });
+            }
+
+            setTimeout(this.updateFocus, 0);
+        },
+        onYearSelect(event, year) {
+            if (this.view === 'year') {
+                this.onDateSelect(event, { year: year.value, month: 0, day: 1, selectable: true });
+            } else {
+                this.currentYear = year.value;
+                this.currentView = 'month';
+                this.$emit('year-change', { month: this.currentMonth + 1, year: this.currentYear });
+            }
+
+            setTimeout(this.updateFocus, 0);
+        },
+        enableModality() {
+            if (!this.mask) {
+                let styleClass = 'p-datepicker-mask p-datepicker-mask-scrollblocker p-component-overlay p-component-overlay-enter';
+
+                this.mask = DomHandler.createElement('div', {
+                    class: !this.isUnstyled && styleClass,
+                    'p-bind': this.ptm('datepickermask')
+                });
+                this.mask.style.zIndex = String(parseInt(this.overlay.style.zIndex, 10) - 1);
+
+                this.maskClickListener = () => {
+                    this.overlayVisible = false;
+                };
+
+                this.mask.addEventListener('click', this.maskClickListener);
+
+                document.body.appendChild(this.mask);
+                DomHandler.blockBodyScroll();
+            }
+        },
+        disableModality() {
+            if (this.mask) {
+                if (this.isUnstyled) {
+                    this.destroyMask();
+                } else {
+                    DomHandler.addClass(this.mask, 'p-component-overlay-leave');
+                    this.mask.addEventListener('animationend', () => {
+                        this.destroyMask();
+                    });
+                }
+            }
+        },
+        destroyMask() {
+            this.mask.removeEventListener('click', this.maskClickListener);
+            this.maskClickListener = null;
+            document.body.removeChild(this.mask);
+            this.mask = null;
+
+            let bodyChildren = document.body.children;
+            let hasBlockerMasks;
+
+            for (let i = 0; i < bodyChildren.length; i++) {
+                let bodyChild = bodyChildren[i];
+
+                if (DomHandler.isAttributeEquals(bodyChild, 'data-pc-section', 'datepickermask')) {
+                    hasBlockerMasks = true;
+                    break;
+                }
+            }
+
+            if (!hasBlockerMasks) {
+                DomHandler.unblockBodyScroll();
+            }
+        },
+        updateCurrentMetaData() {
+            const viewDate = this.viewDate;
+
+            this.currentMonth = viewDate.getMonth();
+            this.currentYear = viewDate.getFullYear();
+
+            if (this.showTime || this.timeOnly) {
+                this.updateCurrentTimeMeta(viewDate);
+            }
+        },
+        isValidSelection(value) {
+            if (value == null) {
+                return true;
+            }
+
+            let isValid = true;
+
+            if (this.isSingleSelection()) {
+                if (!this.isSelectable(value.getDate(), value.getMonth(), value.getFullYear(), false)) {
+                    isValid = false;
+                }
+            } else if (value.every((v) => this.isSelectable(v.getDate(), v.getMonth(), v.getFullYear(), false))) {
+                if (this.isRangeSelection()) {
+                    isValid = value.length > 1 && value[1] > value[0] ? true : false;
+                }
+            }
+
+            return isValid;
+        },
+        parseValue(text) {
+            if (!text || text.trim().length === 0) {
+                return null;
+            }
+
+            let value;
+
+            if (this.isSingleSelection()) {
+                value = this.parseDateTime(text);
+            } else if (this.isMultipleSelection()) {
+                let tokens = text.split(',');
+
+                value = [];
+
+                for (let token of tokens) {
+                    value.push(this.parseDateTime(token.trim()));
+                }
+            } else if (this.isRangeSelection()) {
+                let tokens = text.split(' - ');
+
+                value = [];
+
+                for (let i = 0; i < tokens.length; i++) {
+                    value[i] = this.parseDateTime(tokens[i].trim());
+                }
+            }
+
+            return value;
+        },
+        parseDateTime(text) {
+            let date;
+            let parts = text.split(' ');
+
+            if (this.timeOnly) {
+                date = new Date();
+                this.populateTime(date, parts[0], parts[1]);
+            } else {
+                const dateFormat = this.datePattern;
+
+                if (this.showTime) {
+                    date = this.parseDate(parts[0], dateFormat);
+                    this.populateTime(date, parts[1], parts[2]);
+                } else {
+                    date = this.parseDate(text, dateFormat);
+                }
+            }
+
+            return date;
+        },
+        populateTime(value, timeString, ampm) {
+            if (this.hourFormat == '12' && !ampm) {
+                throw 'Invalid Time';
+            }
+
+            this.pm = ampm === this.$primevue.config.locale.pm || ampm === this.$primevue.config.locale.pm.toLowerCase();
+            let time = this.parseTime(timeString);
+
+            value.setHours(time.hour);
+            value.setMinutes(time.minute);
+            value.setSeconds(time.second);
+        },
+        parseTime(value) {
+            let tokens = value.split(':');
+            let validTokenLength = this.showSeconds ? 3 : 2;
+            let regex = /^[0-9][0-9]$/;
+
+            if (tokens.length !== validTokenLength || !tokens[0].match(regex) || !tokens[1].match(regex) || (this.showSeconds && !tokens[2].match(regex))) {
+                throw 'Invalid time';
+            }
+
+            let h = parseInt(tokens[0]);
+            let m = parseInt(tokens[1]);
+            let s = this.showSeconds ? parseInt(tokens[2]) : null;
+
+            if (isNaN(h) || isNaN(m) || h > 23 || m > 59 || (this.hourFormat == '12' && h > 12) || (this.showSeconds && (isNaN(s) || s > 59))) {
+                throw 'Invalid time';
+            } else {
+                if (this.hourFormat == '12' && h !== 12 && this.pm) {
+                    h += 12;
+                } else if (this.hourFormat == '12' && h == 12 && !this.pm) {
+                    h = 0;
+                }
+
+                return { hour: h, minute: m, second: s };
+            }
+        },
+        parseDate(value, format) {
+            if (format == null || value == null) {
+                throw 'Invalid arguments';
+            }
+
+            value = typeof value === 'object' ? value.toString() : value + '';
+
+            if (value === '') {
+                return null;
+            }
+
+            let iFormat,
+                dim,
+                extra,
+                iValue = 0,
+                shortYearCutoff = typeof this.shortYearCutoff !== 'string' ? this.shortYearCutoff : (new Date().getFullYear() % 100) + parseInt(this.shortYearCutoff, 10),
+                year = -1,
+                month = -1,
+                day = -1,
+                doy = -1,
+                literal = false,
+                date,
+                lookAhead = (match) => {
+                    let matches = iFormat + 1 < format.length && format.charAt(iFormat + 1) === match;
+
+                    if (matches) {
+                        iFormat++;
+                    }
+
+                    return matches;
+                },
+                getNumber = (match) => {
+                    let isDoubled = lookAhead(match),
+                        size = match === '@' ? 14 : match === '!' ? 20 : match === 'y' && isDoubled ? 4 : match === 'o' ? 3 : 2,
+                        minSize = match === 'y' ? size : 1,
+                        digits = new RegExp('^\\d{' + minSize + ',' + size + '}'),
+                        num = value.substring(iValue).match(digits);
+
+                    if (!num) {
+                        throw 'Missing number at position ' + iValue;
+                    }
+
+                    iValue += num[0].length;
+
+                    return parseInt(num[0], 10);
+                },
+                getName = (match, shortNames, longNames) => {
+                    let index = -1;
+                    let arr = lookAhead(match) ? longNames : shortNames;
+                    let names = [];
+
+                    for (let i = 0; i < arr.length; i++) {
+                        names.push([i, arr[i]]);
+                    }
+
+                    names.sort((a, b) => {
+                        return -(a[1].length - b[1].length);
+                    });
+
+                    for (let i = 0; i < names.length; i++) {
+                        let name = names[i][1];
+
+                        if (value.substr(iValue, name.length).toLowerCase() === name.toLowerCase()) {
+                            index = names[i][0];
+                            iValue += name.length;
+                            break;
+                        }
+                    }
+
+                    if (index !== -1) {
+                        return index + 1;
+                    } else {
+                        throw 'Unknown name at position ' + iValue;
+                    }
+                },
+                checkLiteral = () => {
+                    if (value.charAt(iValue) !== format.charAt(iFormat)) {
+                        throw 'Unexpected literal at position ' + iValue;
+                    }
+
+                    iValue++;
+                };
+
+            if (this.currentView === 'month') {
+                day = 1;
+            }
+
+            for (iFormat = 0; iFormat < format.length; iFormat++) {
+                if (literal) {
+                    if (format.charAt(iFormat) === "'" && !lookAhead("'")) {
+                        literal = false;
+                    } else {
+                        checkLiteral();
+                    }
+                } else {
+                    switch (format.charAt(iFormat)) {
+                        case 'd':
+                            day = getNumber('d');
+                            break;
+                        case 'D':
+                            getName('D', this.$primevue.config.locale.dayNamesShort, this.$primevue.config.locale.dayNames);
+                            break;
+                        case 'o':
+                            doy = getNumber('o');
+                            break;
+                        case 'm':
+                            month = getNumber('m');
+                            break;
+                        case 'M':
+                            month = getName('M', this.$primevue.config.locale.monthNamesShort, this.$primevue.config.locale.monthNames);
+                            break;
+                        case 'y':
+                            year = getNumber('y');
+                            break;
+                        case '@':
+                            date = new Date(getNumber('@'));
+                            year = date.getFullYear();
+                            month = date.getMonth() + 1;
+                            day = date.getDate();
+                            break;
+                        case '!':
+                            date = new Date((getNumber('!') - this.ticksTo1970) / 10000);
+                            year = date.getFullYear();
+                            month = date.getMonth() + 1;
+                            day = date.getDate();
+                            break;
+                        case "'":
+                            if (lookAhead("'")) {
+                                checkLiteral();
+                            } else {
+                                literal = true;
+                            }
+
+                            break;
+                        default:
+                            checkLiteral();
+                    }
+                }
+            }
+
+            if (iValue < value.length) {
+                extra = value.substr(iValue);
+
+                if (!/^\s+/.test(extra)) {
+                    throw 'Extra/unparsed characters found in date: ' + extra;
+                }
+            }
+
+            if (year === -1) {
+                year = new Date().getFullYear();
+            } else if (year < 100) {
+                year += new Date().getFullYear() - (new Date().getFullYear() % 100) + (year <= shortYearCutoff ? 0 : -100);
+            }
+
+            if (doy > -1) {
+                month = 1;
+                day = doy;
+
+                do {
+                    dim = this.getDaysCountInMonth(year, month - 1);
+
+                    if (day <= dim) {
+                        break;
+                    }
+
+                    month++;
+                    day -= dim;
+                    // eslint-disable-next-line
+                } while (true);
+            }
+
+            date = this.daylightSavingAdjust(new Date(year, month - 1, day));
+
+            if (date.getFullYear() !== year || date.getMonth() + 1 !== month || date.getDate() !== day) {
+                throw 'Invalid date'; // E.g. 31/02/00
+            }
+
+            return date;
+        },
+        getWeekNumber(date) {
+            let checkDate = new Date(date.getTime());
+
+            checkDate.setDate(checkDate.getDate() + 4 - (checkDate.getDay() || 7));
+            let time = checkDate.getTime();
+
+            checkDate.setMonth(0);
+            checkDate.setDate(1);
+
+            return Math.floor(Math.round((time - checkDate.getTime()) / 86400000) / 7) + 1;
+        },
+        onDateCellKeydown(event, date, groupIndex) {
+            const cellContent = event.currentTarget;
+            const cell = cellContent.parentElement;
+
+            const cellIndex = DomHandler.index(cell);
+
+            switch (event.code) {
+                case 'ArrowDown': {
+                    cellContent.tabIndex = '-1';
+
+                    let nextRow = cell.parentElement.nextElementSibling;
+
+                    if (nextRow) {
+                        let tableRowIndex = DomHandler.index(cell.parentElement);
+                        const tableRows = Array.from(cell.parentElement.parentElement.children);
+                        const nextTableRows = tableRows.slice(tableRowIndex + 1);
+
+                        let hasNextFocusableDate = nextTableRows.find((el) => {
+                            let focusCell = el.children[cellIndex].children[0];
+
+                            return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
+                        });
+
+                        if (hasNextFocusableDate) {
+                            let focusCell = hasNextFocusableDate.children[cellIndex].children[0];
+
+                            focusCell.tabIndex = '0';
+                            focusCell.focus();
+                        } else {
+                            this.navigationState = { backward: false };
+                            this.navForward(event);
+                        }
+                    } else {
+                        this.navigationState = { backward: false };
+                        this.navForward(event);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowUp': {
+                    cellContent.tabIndex = '-1';
+
+                    if (event.altKey) {
+                        this.overlayVisible = false;
+                        this.focused = true;
+                    } else {
+                        let prevRow = cell.parentElement.previousElementSibling;
+
+                        if (prevRow) {
+                            let tableRowIndex = DomHandler.index(cell.parentElement);
+                            const tableRows = Array.from(cell.parentElement.parentElement.children);
+                            const prevTableRows = tableRows.slice(0, tableRowIndex).reverse();
+
+                            let hasNextFocusableDate = prevTableRows.find((el) => {
+                                let focusCell = el.children[cellIndex].children[0];
+
+                                return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
+                            });
+
+                            if (hasNextFocusableDate) {
+                                let focusCell = hasNextFocusableDate.children[cellIndex].children[0];
+
+                                focusCell.tabIndex = '0';
+                                focusCell.focus();
+                            } else {
+                                this.navigationState = { backward: true };
+                                this.navBackward(event);
+                            }
+                        } else {
+                            this.navigationState = { backward: true };
+                            this.navBackward(event);
+                        }
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowLeft': {
+                    cellContent.tabIndex = '-1';
+                    let prevCell = cell.previousElementSibling;
+
+                    if (prevCell) {
+                        const cells = Array.from(cell.parentElement.children);
+                        const prevCells = cells.slice(0, cellIndex).reverse();
+
+                        let hasNextFocusableDate = prevCells.find((el) => {
+                            let focusCell = el.children[0];
+
+                            return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
+                        });
+
+                        if (hasNextFocusableDate) {
+                            let focusCell = hasNextFocusableDate.children[0];
+
+                            focusCell.tabIndex = '0';
+                            focusCell.focus();
+                        } else {
+                            this.navigateToMonth(event, true, groupIndex);
+                        }
+                    } else {
+                        this.navigateToMonth(event, true, groupIndex);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowRight': {
+                    cellContent.tabIndex = '-1';
+                    let nextCell = cell.nextElementSibling;
+
+                    if (nextCell) {
+                        const cells = Array.from(cell.parentElement.children);
+                        const nextCells = cells.slice(cellIndex + 1);
+                        let hasNextFocusableDate = nextCells.find((el) => {
+                            let focusCell = el.children[0];
+
+                            return !DomHandler.getAttribute(focusCell, 'data-p-disabled');
+                        });
+
+                        if (hasNextFocusableDate) {
+                            let focusCell = hasNextFocusableDate.children[0];
+
+                            focusCell.tabIndex = '0';
+                            focusCell.focus();
+                        } else {
+                            this.navigateToMonth(event, false, groupIndex);
+                        }
+                    } else {
+                        this.navigateToMonth(event, false, groupIndex);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Enter':
+                case 'NumpadEnter':
+
+                case 'Space': {
+                    this.onDateSelect(event, date);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Escape': {
+                    this.overlayVisible = false;
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Tab': {
+                    if (!this.inline) {
+                        this.trapFocus(event);
+                    }
+
+                    break;
+                }
+
+                case 'Home': {
+                    cellContent.tabIndex = '-1';
+                    let currentRow = cell.parentElement;
+                    let focusCell = currentRow.children[0].children[0];
+
+                    if (DomHandler.getAttribute(focusCell, 'data-p-disabled')) {
+                        this.navigateToMonth(event, true, groupIndex);
+                    } else {
+                        focusCell.tabIndex = '0';
+                        focusCell.focus();
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'End': {
+                    cellContent.tabIndex = '-1';
+                    let currentRow = cell.parentElement;
+                    let focusCell = currentRow.children[currentRow.children.length - 1].children[0];
+
+                    if (DomHandler.getAttribute(focusCell, 'data-p-disabled')) {
+                        this.navigateToMonth(event, false, groupIndex);
+                    } else {
+                        focusCell.tabIndex = '0';
+                        focusCell.focus();
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'PageUp': {
+                    cellContent.tabIndex = '-1';
+                    if (event.shiftKey) {
+                        this.navigationState = { backward: true };
+                        this.navBackward(event);
+                    } else this.navigateToMonth(event, true, groupIndex);
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'PageDown': {
+                    cellContent.tabIndex = '-1';
+                    if (event.shiftKey) {
+                        this.navigationState = { backward: false };
+                        this.navForward(event);
+                    } else this.navigateToMonth(event, false, groupIndex);
+
+                    event.preventDefault();
+                    break;
+                }
+
+                default:
+                    //no op
+                    break;
+            }
+        },
+        navigateToMonth(event, prev, groupIndex) {
+            if (prev) {
+                if (this.numberOfMonths === 1 || groupIndex === 0) {
+                    this.navigationState = { backward: true };
+                    this.navBackward(event);
+                } else {
+                    let prevMonthContainer = this.overlay.children[groupIndex - 1];
+                    let cells = DomHandler.find(prevMonthContainer, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
+                    let focusCell = cells[cells.length - 1];
+
+                    focusCell.tabIndex = '0';
+                    focusCell.focus();
+                }
+            } else {
+                if (this.numberOfMonths === 1 || groupIndex === this.numberOfMonths - 1) {
+                    this.navigationState = { backward: false };
+                    this.navForward(event);
+                } else {
+                    let nextMonthContainer = this.overlay.children[groupIndex + 1];
+                    let focusCell = DomHandler.findSingle(nextMonthContainer, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
+
+                    focusCell.tabIndex = '0';
+                    focusCell.focus();
+                }
+            }
+        },
+        onMonthCellKeydown(event, index) {
+            const cell = event.currentTarget;
+
+            switch (event.code) {
+                case 'ArrowUp':
+
+                case 'ArrowDown': {
+                    cell.tabIndex = '-1';
+                    var cells = cell.parentElement.children;
+                    var cellIndex = DomHandler.index(cell);
+                    let nextCell = cells[event.code === 'ArrowDown' ? cellIndex + 3 : cellIndex - 3];
+
+                    if (nextCell) {
+                        nextCell.tabIndex = '0';
+                        nextCell.focus();
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowLeft': {
+                    cell.tabIndex = '-1';
+                    let prevCell = cell.previousElementSibling;
+
+                    if (prevCell) {
+                        prevCell.tabIndex = '0';
+                        prevCell.focus();
+                    } else {
+                        this.navigationState = { backward: true };
+                        this.navBackward(event);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowRight': {
+                    cell.tabIndex = '-1';
+                    let nextCell = cell.nextElementSibling;
+
+                    if (nextCell) {
+                        nextCell.tabIndex = '0';
+                        nextCell.focus();
+                    } else {
+                        this.navigationState = { backward: false };
+                        this.navForward(event);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'PageUp': {
+                    if (event.shiftKey) return;
+                    this.navigationState = { backward: true };
+                    this.navBackward(event);
+
+                    break;
+                }
+
+                case 'PageDown': {
+                    if (event.shiftKey) return;
+                    this.navigationState = { backward: false };
+                    this.navForward(event);
+
+                    break;
+                }
+
+                case 'Enter':
+                case 'NumpadEnter':
+
+                case 'Space': {
+                    this.onMonthSelect(event, index);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Escape': {
+                    this.overlayVisible = false;
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Tab': {
+                    this.trapFocus(event);
+                    break;
+                }
+
+                default:
+                    //no op
+                    break;
+            }
+        },
+        onYearCellKeydown(event, index) {
+            const cell = event.currentTarget;
+
+            switch (event.code) {
+                case 'ArrowUp':
+
+                case 'ArrowDown': {
+                    cell.tabIndex = '-1';
+                    var cells = cell.parentElement.children;
+                    var cellIndex = DomHandler.index(cell);
+                    let nextCell = cells[event.code === 'ArrowDown' ? cellIndex + 2 : cellIndex - 2];
+
+                    if (nextCell) {
+                        nextCell.tabIndex = '0';
+                        nextCell.focus();
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowLeft': {
+                    cell.tabIndex = '-1';
+                    let prevCell = cell.previousElementSibling;
+
+                    if (prevCell) {
+                        prevCell.tabIndex = '0';
+                        prevCell.focus();
+                    } else {
+                        this.navigationState = { backward: true };
+                        this.navBackward(event);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'ArrowRight': {
+                    cell.tabIndex = '-1';
+                    let nextCell = cell.nextElementSibling;
+
+                    if (nextCell) {
+                        nextCell.tabIndex = '0';
+                        nextCell.focus();
+                    } else {
+                        this.navigationState = { backward: false };
+                        this.navForward(event);
+                    }
+
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'PageUp': {
+                    if (event.shiftKey) return;
+                    this.navigationState = { backward: true };
+                    this.navBackward(event);
+
+                    break;
+                }
+
+                case 'PageDown': {
+                    if (event.shiftKey) return;
+                    this.navigationState = { backward: false };
+                    this.navForward(event);
+
+                    break;
+                }
+
+                case 'Enter':
+                case 'NumpadEnter':
+
+                case 'Space': {
+                    this.onYearSelect(event, index);
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Escape': {
+                    this.overlayVisible = false;
+                    event.preventDefault();
+                    break;
+                }
+
+                case 'Tab': {
+                    this.trapFocus(event);
+                    break;
+                }
+
+                default:
+                    //no op
+                    break;
+            }
+        },
+        updateFocus() {
+            let cell;
+
+            if (this.navigationState) {
+                if (this.navigationState.button) {
+                    this.initFocusableCell();
+
+                    if (this.navigationState.backward) this.previousButton.focus();
+                    else this.nextButton.focus();
+                } else {
+                    if (this.navigationState.backward) {
+                        let cells;
+
+                        if (this.currentView === 'month') {
+                            cells = DomHandler.find(this.overlay, '[data-pc-section="monthpicker"] [data-pc-section="month"]:not([data-p-disabled="true"])');
+                        } else if (this.currentView === 'year') {
+                            cells = DomHandler.find(this.overlay, '[data-pc-section="yearpicker"] [data-pc-section="year"]:not([data-p-disabled="true"])');
+                        } else {
+                            cells = DomHandler.find(this.overlay, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
+                        }
+
+                        if (cells && cells.length > 0) {
+                            cell = cells[cells.length - 1];
+                        }
+                    } else {
+                        if (this.currentView === 'month') {
+                            cell = DomHandler.findSingle(this.overlay, '[data-pc-section="monthpicker"] [data-pc-section="month"]:not([data-p-disabled="true"])');
+                        } else if (this.currentView === 'year') {
+                            cell = DomHandler.findSingle(this.overlay, '[data-pc-section="yearpicker"] [data-pc-section="year"]:not([data-p-disabled="true"])');
+                        } else {
+                            cell = DomHandler.findSingle(this.overlay, 'table td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
+                        }
+                    }
+
+                    if (cell) {
+                        cell.tabIndex = '0';
+                        cell.focus();
+                    }
+                }
+
+                this.navigationState = null;
+            } else {
+                this.initFocusableCell();
+            }
+        },
+        initFocusableCell() {
+            let cell;
+
+            if (this.currentView === 'month') {
+                let cells = DomHandler.find(this.overlay, '[data-pc-section="monthpicker"] [data-pc-section="month"]');
+                let selectedCell = DomHandler.findSingle(this.overlay, '[data-pc-section="monthpicker"] [data-pc-section="month"][data-p-highlight="true"]');
+
+                cells.forEach((cell) => (cell.tabIndex = -1));
+                cell = selectedCell || cells[0];
+            } else if (this.currentView === 'year') {
+                let cells = DomHandler.find(this.overlay, '[data-pc-section="yearpicker"] [data-pc-section="year"]');
+                let selectedCell = DomHandler.findSingle(this.overlay, '[data-pc-section="yearpicker"] [data-pc-section="year"][data-p-highlight="true"]');
+
+                cells.forEach((cell) => (cell.tabIndex = -1));
+                cell = selectedCell || cells[0];
+            } else {
+                cell = DomHandler.findSingle(this.overlay, 'span[data-p-highlight="true"]');
+
+                if (!cell) {
+                    let todayCell = DomHandler.findSingle(this.overlay, 'td.p-datepicker-today span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
+
+                    if (todayCell) cell = todayCell;
+                    else cell = DomHandler.findSingle(this.overlay, '.p-datepicker-calendar td span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
+                }
+            }
+
+            if (cell) {
+                cell.tabIndex = '0';
+
+                if (!this.inline && (!this.navigationState || !this.navigationState.button) && !this.timePickerChange) {
+                    if (!this.manualInput) cell.focus();
+                }
+
+                this.preventFocus = false;
+            }
+        },
+        trapFocus(event) {
+            event.preventDefault();
+            let focusableElements = DomHandler.getFocusableElements(this.overlay);
+
+            if (focusableElements && focusableElements.length > 0) {
+                if (!document.activeElement) {
+                    focusableElements[0].focus();
+                } else {
+                    let focusedIndex = focusableElements.indexOf(document.activeElement);
+
+                    if (event.shiftKey) {
+                        if (focusedIndex === -1 || focusedIndex === 0) focusableElements[focusableElements.length - 1].focus();
+                        else focusableElements[focusedIndex - 1].focus();
+                    } else {
+                        if (focusedIndex === -1) {
+                            if (this.timeOnly) {
+                                focusableElements[0].focus();
+                            } else {
+                                let spanIndex = null;
+
+                                for (let i = 0; i < focusableElements.length; i++) {
+                                    if (focusableElements[i].tagName === 'SPAN') spanIndex = i;
+                                }
+
+                                focusableElements[spanIndex].focus();
+                            }
+                        } else if (focusedIndex === focusableElements.length - 1) focusableElements[0].focus();
+                        else focusableElements[focusedIndex + 1].focus();
+                    }
+                }
+            }
+        },
+        onContainerButtonKeydown(event) {
+            switch (event.code) {
+                case 'Tab':
+                    this.trapFocus(event);
+                    break;
+
+                case 'Escape':
+                    this.overlayVisible = false;
+                    event.preventDefault();
+                    break;
+
+                default:
+                    //Noop
+                    break;
+            }
+
+            this.$emit('keydown', event);
+        },
+        onInput(event) {
+            try {
+                this.selectionStart = this.input.selectionStart;
+                this.selectionEnd = this.input.selectionEnd;
+
+                let value = this.parseValue(event.target.value);
+
+                if (this.isValidSelection(value)) {
+                    this.typeUpdate = true;
+                    this.updateModel(value);
+                }
+            } catch (err) {
+                /* NoOp */
+            }
+
+            this.$emit('input', event);
+        },
+        onInputClick() {
+            if (this.showOnFocus && this.isEnabled() && !this.overlayVisible) {
+                this.overlayVisible = true;
+            }
+        },
+        onFocus(event) {
+            if (this.showOnFocus && this.isEnabled()) {
+                this.overlayVisible = true;
+            }
+
+            this.focused = true;
+            this.$emit('focus', event);
+        },
+        onBlur(event) {
+            this.$emit('blur', { originalEvent: event, value: event.target.value });
+
+            this.focused = false;
+            event.target.value = this.formatValue(this.modelValue);
+        },
+        onKeyDown(event) {
+            if (event.code === 'ArrowDown' && this.overlay) {
+                this.trapFocus(event);
+            } else if (event.code === 'ArrowDown' && !this.overlay) {
+                this.overlayVisible = true;
+            } else if (event.code === 'Escape') {
+                if (this.overlayVisible) {
+                    this.overlayVisible = false;
+                    event.preventDefault();
+                }
+            } else if (event.code === 'Tab') {
+                if (this.overlay) {
+                    DomHandler.getFocusableElements(this.overlay).forEach((el) => (el.tabIndex = '-1'));
+                }
+
+                if (this.overlayVisible) {
+                    this.overlayVisible = false;
+                }
+            } else if (event.code === 'Enter') {
+                if (this.manualInput && event.target.value !== null && event.target.value?.trim() !== '') {
+                    try {
+                        let value = this.parseValue(event.target.value);
+
+                        if (this.isValidSelection(value)) {
+                            this.overlayVisible = false;
+                        }
+                    } catch (err) {
+                        /* NoOp */
+                    }
+                }
+            }
+        },
+        overlayRef(el) {
+            this.overlay = el;
+        },
+        inputRef(el) {
+            this.input = el;
+        },
+        previousButtonRef(el) {
+            this.previousButton = el;
+        },
+        nextButtonRef(el) {
+            this.nextButton = el;
+        },
+        getMonthName(index) {
+            return this.$primevue.config.locale.monthNames[index];
+        },
+        getYear(month) {
+            return this.currentView === 'month' ? this.currentYear : month.year;
+        },
+        onOverlayClick(event) {
+            if (!this.inline) {
+                OverlayEventBus.emit('overlay-click', {
+                    originalEvent: event,
+                    target: this.$el
+                });
+            }
+        },
+        onOverlayKeyDown(event) {
+            switch (event.code) {
+                case 'Escape':
+                    if (!this.inline) {
+                        this.input.focus();
+                        this.overlayVisible = false;
+                    }
+
+                    break;
+
+                default:
+                    break;
+            }
+        },
+        onOverlayMouseUp(event) {
+            this.onOverlayClick(event);
+        },
+        createResponsiveStyle() {
+            if (this.numberOfMonths > 1 && this.responsiveOptions && !this.isUnstyled) {
+                if (!this.responsiveStyleElement) {
+                    this.responsiveStyleElement = document.createElement('style');
+                    this.responsiveStyleElement.type = 'text/css';
+                    DomHandler.setAttribute(this.responsiveStyleElement, 'nonce', this.$primevue?.config?.csp?.nonce);
+                    document.body.appendChild(this.responsiveStyleElement);
+                }
+
+                let innerHTML = '';
+
+                if (this.responsiveOptions) {
+                    const comparer = ObjectUtils.localeComparator();
+                    let responsiveOptions = [...this.responsiveOptions].filter((o) => !!(o.breakpoint && o.numMonths)).sort((o1, o2) => -1 * comparer(o1.breakpoint, o2.breakpoint));
+
+                    for (let i = 0; i < responsiveOptions.length; i++) {
+                        let { breakpoint, numMonths } = responsiveOptions[i];
+                        let styles = `
+                            .p-datepicker[${this.attributeSelector}] .p-datepicker-group:nth-child(${numMonths}) .p-datepicker-next {
+                                display: inline-flex;
+                            }
+                        `;
+
+                        for (let j = numMonths; j < this.numberOfMonths; j++) {
+                            styles += `
+                                .p-datepicker[${this.attributeSelector}] .p-datepicker-group:nth-child(${j + 1}) {
+                                    display: none;
+                                }
+                            `;
+                        }
+
+                        innerHTML += `
+                            @media screen and (max-width: ${breakpoint}) {
+                                ${styles}
+                            }
+                        `;
+                    }
+                }
+
+                this.responsiveStyleElement.innerHTML = innerHTML;
+            }
+        },
+        destroyResponsiveStyleElement() {
+            if (this.responsiveStyleElement) {
+                this.responsiveStyleElement.remove();
+                this.responsiveStyleElement = null;
+            }
+        }
+    },
+    computed: {
+        viewDate() {
+            let propValue = this.modelValue;
+
+            if (propValue && Array.isArray(propValue)) {
+                if (this.isRangeSelection()) {
+                    propValue = this.inline ? propValue[0] : propValue[1] || propValue[0];
+                } else if (this.isMultipleSelection()) {
+                    propValue = propValue[propValue.length - 1];
+                }
+            }
+
+            if (propValue && typeof propValue !== 'string') {
+                return propValue;
+            } else {
+                let today = new Date();
+
+                if (this.maxDate && this.maxDate < today) {
+                    return this.maxDate;
+                }
+
+                if (this.minDate && this.minDate > today) {
+                    return this.minDate;
+                }
+
+                return today;
+            }
+        },
+        inputFieldValue() {
+            return this.formatValue(this.modelValue);
+        },
+        months() {
+            let months = [];
+
+            for (let i = 0; i < this.numberOfMonths; i++) {
+                let month = this.currentMonth + i;
+                let year = this.currentYear;
+
+                if (month > 11) {
+                    month = (month % 11) - 1;
+                    year = year + 1;
+                }
+
+                let dates = [];
+                let firstDay = this.getFirstDayOfMonthIndex(month, year);
+                let daysLength = this.getDaysCountInMonth(month, year);
+                let prevMonthDaysLength = this.getDaysCountInPrevMonth(month, year);
+                let dayNo = 1;
+                let today = new Date();
+                let weekNumbers = [];
+                let monthRows = Math.ceil((daysLength + firstDay) / 7);
+
+                for (let i = 0; i < monthRows; i++) {
+                    let week = [];
+
+                    if (i == 0) {
+                        for (let j = prevMonthDaysLength - firstDay + 1; j <= prevMonthDaysLength; j++) {
+                            let prev = this.getPreviousMonthAndYear(month, year);
+
+                            week.push({ day: j, month: prev.month, year: prev.year, otherMonth: true, today: this.isToday(today, j, prev.month, prev.year), selectable: this.isSelectable(j, prev.month, prev.year, true) });
+                        }
+
+                        let remainingDaysLength = 7 - week.length;
+
+                        for (let j = 0; j < remainingDaysLength; j++) {
+                            week.push({ day: dayNo, month: month, year: year, today: this.isToday(today, dayNo, month, year), selectable: this.isSelectable(dayNo, month, year, false) });
+                            dayNo++;
+                        }
+                    } else {
+                        for (let j = 0; j < 7; j++) {
+                            if (dayNo > daysLength) {
+                                let next = this.getNextMonthAndYear(month, year);
+
+                                week.push({
+                                    day: dayNo - daysLength,
+                                    month: next.month,
+                                    year: next.year,
+                                    otherMonth: true,
+                                    today: this.isToday(today, dayNo - daysLength, next.month, next.year),
+                                    selectable: this.isSelectable(dayNo - daysLength, next.month, next.year, true)
+                                });
+                            } else {
+                                week.push({ day: dayNo, month: month, year: year, today: this.isToday(today, dayNo, month, year), selectable: this.isSelectable(dayNo, month, year, false) });
+                            }
+
+                            dayNo++;
+                        }
+                    }
+
+                    if (this.showWeek) {
+                        weekNumbers.push(this.getWeekNumber(new Date(week[0].year, week[0].month, week[0].day)));
+                    }
+
+                    dates.push(week);
+                }
+
+                months.push({
+                    month: month,
+                    year: year,
+                    dates: dates,
+                    weekNumbers: weekNumbers
+                });
+            }
+
+            return months;
+        },
+        weekDays() {
+            let weekDays = [];
+            let dayIndex = this.$primevue.config.locale.firstDayOfWeek;
+
+            for (let i = 0; i < 7; i++) {
+                weekDays.push(this.$primevue.config.locale.dayNamesMin[dayIndex]);
+                dayIndex = dayIndex == 6 ? 0 : ++dayIndex;
+            }
+
+            return weekDays;
+        },
+        ticksTo1970() {
+            return ((1970 - 1) * 365 + Math.floor(1970 / 4) - Math.floor(1970 / 100) + Math.floor(1970 / 400)) * 24 * 60 * 60 * 10000000;
+        },
+        sundayIndex() {
+            return this.$primevue.config.locale.firstDayOfWeek > 0 ? 7 - this.$primevue.config.locale.firstDayOfWeek : 0;
+        },
+        datePattern() {
+            return this.dateFormat || this.$primevue.config.locale.dateFormat;
+        },
+        yearOptions() {
+            if (this.yearRange) {
+                let $vm = this;
+                const years = this.yearRange.split(':');
+                let yearStart = parseInt(years[0]);
+                let yearEnd = parseInt(years[1]);
+                let yearOptions = [];
+
+                if (this.currentYear < yearStart) {
+                    $vm.currentYear = yearEnd;
+                } else if (this.currentYear > yearEnd) {
+                    $vm.currentYear = yearStart;
+                }
+
+                for (let i = yearStart; i <= yearEnd; i++) {
+                    yearOptions.push(i);
+                }
+
+                return yearOptions;
+            } else {
+                return null;
+            }
+        },
+        monthPickerValues() {
+            let monthPickerValues = [];
+
+            const isSelectableMonth = (baseMonth) => {
+                if (this.minDate) {
+                    const minMonth = this.minDate.getMonth();
+                    const minYear = this.minDate.getFullYear();
+
+                    if (this.currentYear < minYear || (this.currentYear === minYear && baseMonth < minMonth)) {
+                        return false;
+                    }
+                }
+
+                if (this.maxDate) {
+                    const maxMonth = this.maxDate.getMonth();
+                    const maxYear = this.maxDate.getFullYear();
+
+                    if (this.currentYear > maxYear || (this.currentYear === maxYear && baseMonth > maxMonth)) {
+                        return false;
+                    }
+                }
+
+                return true;
+            };
+
+            for (let i = 0; i <= 11; i++) {
+                monthPickerValues.push({ value: this.$primevue.config.locale.monthNamesShort[i], selectable: isSelectableMonth(i) });
+            }
+
+            return monthPickerValues;
+        },
+        yearPickerValues() {
+            let yearPickerValues = [];
+            let base = this.currentYear - (this.currentYear % 10);
+
+            const isSelectableYear = (baseYear) => {
+                if (this.minDate) {
+                    if (this.minDate.getFullYear() > baseYear) return false;
+                }
+
+                if (this.maxDate) {
+                    if (this.maxDate.getFullYear() < baseYear) return false;
+                }
+
+                return true;
+            };
+
+            for (let i = 0; i < 10; i++) {
+                yearPickerValues.push({ value: base + i, selectable: isSelectableYear(base + i) });
+            }
+
+            return yearPickerValues;
+        },
+        formattedCurrentHour() {
+            return this.currentHour < 10 ? '0' + this.currentHour : this.currentHour;
+        },
+        formattedCurrentMinute() {
+            return this.currentMinute < 10 ? '0' + this.currentMinute : this.currentMinute;
+        },
+        formattedCurrentSecond() {
+            return this.currentSecond < 10 ? '0' + this.currentSecond : this.currentSecond;
+        },
+        todayLabel() {
+            return this.$primevue.config.locale.today;
+        },
+        clearLabel() {
+            return this.$primevue.config.locale.clear;
+        },
+        weekHeaderLabel() {
+            return this.$primevue.config.locale.weekHeader;
+        },
+        monthNames() {
+            return this.$primevue.config.locale.monthNames;
+        },
+        attributeSelector() {
+            return UniqueComponentId();
+        },
+        switchViewButtonDisabled() {
+            return this.numberOfMonths > 1 || this.disabled;
+        },
+        panelId() {
+            return this.d_id + '_panel';
+        }
+    },
+    components: {
+        CalendarButton: Button,
+        Portal: Portal,
+        CalendarIcon: CalendarIcon,
+        ChevronLeftIcon: ChevronLeftIcon,
+        ChevronRightIcon: ChevronRightIcon,
+        ChevronUpIcon: ChevronUpIcon,
+        ChevronDownIcon: ChevronDownIcon
+    },
+    directives: {
+        ripple: Ripple
     }
 };
 </script>
diff --git a/components/lib/cascadeselect/CascadeSelectSub.vue b/components/lib/cascadeselect/CascadeSelectSub.vue
index cb3234570..21554cd7e 100644
--- a/components/lib/cascadeselect/CascadeSelectSub.vue
+++ b/components/lib/cascadeselect/CascadeSelectSub.vue
@@ -161,6 +161,9 @@ export default {
         },
         containerRef(el) {
             this.container = el;
+        },
+        listAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.listLabel : undefined;
         }
     },
     directives: {
diff --git a/components/lib/config/PrimeVue.d.ts b/components/lib/config/PrimeVue.d.ts
index 7cac3e143..e7bcda180 100644
--- a/components/lib/config/PrimeVue.d.ts
+++ b/components/lib/config/PrimeVue.d.ts
@@ -322,6 +322,7 @@ export interface PrimeVueLocaleAriaOptions {
     zoomOut?: string;
     rotateRight?: string;
     rotateLeft?: string;
+    listLabel?: string;
 }
 
 export interface PrimeVueLocaleOptions {
diff --git a/components/lib/config/PrimeVue.js b/components/lib/config/PrimeVue.js
index 437e49dd9..40c3e5336 100644
--- a/components/lib/config/PrimeVue.js
+++ b/components/lib/config/PrimeVue.js
@@ -120,7 +120,8 @@ export const defaultOptions = {
             zoomIn: 'Zoom In',
             zoomOut: 'Zoom Out',
             rotateRight: 'Rotate Right',
-            rotateLeft: 'Rotate Left'
+            rotateLeft: 'Rotate Left',
+            listLabel: 'Option List'
         }
     },
     filterMatchModeOptions: {
diff --git a/components/lib/datatable/BodyRow.vue b/components/lib/datatable/BodyRow.vue
index 4b8fcbd1a..81271c482 100644
--- a/components/lib/datatable/BodyRow.vue
+++ b/components/lib/datatable/BodyRow.vue
@@ -282,6 +282,7 @@ export default {
     },
     watch: {
         expandedRows: {
+            deep: true,
             immediate: true,
             handler(newValue) {
                 this.d_rowExpanded = this.dataKey ? newValue?.[ObjectUtils.resolveFieldData(this.rowData, this.dataKey)] !== undefined : newValue?.some((d) => this.equals(this.rowData, d));
diff --git a/components/lib/datatable/DataTable.d.ts b/components/lib/datatable/DataTable.d.ts
index 6f0de1122..e42a0a52e 100755
--- a/components/lib/datatable/DataTable.d.ts
+++ b/components/lib/datatable/DataTable.d.ts
@@ -1135,12 +1135,15 @@ export interface DataTableProps {
     editingRows?: any[] | DataTableEditingRows;
     /**
      * A function that takes the row data as a parameter and returns a string to apply a particular class for the row.
+     * The return value is added to the row's :classes array (see Vue.js class bindings).
      */
-    rowClass?: (data: any) => object | undefined;
+    rowClass?: (data: any) => string | object | undefined;
     /**
-     * A function that takes the row data as a parameter and returns the inline style for the corresponding row.
+     * A function that takes the row data as a parameter and returns the inline style object for the corresponding row.
+     * The function may also return an array of style objects which will be merged.
+     * The return value of this function is directly applied as a Vue.js style-binding on the table row.
      */
-    rowStyle?: (data: any) => object | undefined;
+    rowStyle?: (data: any) => object | object[] | undefined;
     /**
      * When specified, enables horizontal and/or vertical scrolling.
      * @defaultValue false
diff --git a/components/lib/drawer/BaseDrawer.vue b/components/lib/drawer/BaseDrawer.vue
index 79861f1fb..3987963fb 100644
--- a/components/lib/drawer/BaseDrawer.vue
+++ b/components/lib/drawer/BaseDrawer.vue
@@ -59,6 +59,15 @@ export default {
             $pcDrawer: this,
             $parentInstance: this
         };
+    },
+    watch: {
+        dismissable(newValue) {
+            if (newValue) {
+                this.bindOutsideClickListener();
+            } else {
+                this.unbindOutsideClickListener();
+            }
+        }
     }
 };
 </script>
diff --git a/components/lib/drawer/Drawer.spec.js b/components/lib/drawer/Drawer.spec.js
index 47b39d5fd..01aea968d 100644
--- a/components/lib/drawer/Drawer.spec.js
+++ b/components/lib/drawer/Drawer.spec.js
@@ -120,4 +120,12 @@ describe('Drawer.vue', () => {
 
         expect(wrapper.vm.containerVisible).toBeFalsy();
     });
+
+    it('When component is mounted , dismissable property should still be reactive', async () => {
+        await wrapper.setProps({ dismissable: false, visible: true });
+
+        await wrapper.setProps({ dismissable: true });
+
+        expect(wrapper.vm.containerVisible).toBeTruthy();
+    });
 });
diff --git a/components/lib/inputnumber/InputNumber.d.ts b/components/lib/inputnumber/InputNumber.d.ts
index 71e501aa6..709ed4c17 100755
--- a/components/lib/inputnumber/InputNumber.d.ts
+++ b/components/lib/inputnumber/InputNumber.d.ts
@@ -70,6 +70,10 @@ export interface InputNumberInputEvent {
      * New value
      */
     value: string | number | undefined;
+    /**
+     * currentValue
+     */
+    formattedValue: string;
 }
 
 /**
diff --git a/components/lib/inputnumber/InputNumber.vue b/components/lib/inputnumber/InputNumber.vue
index 55c5f115f..6db6c0981 100755
--- a/components/lib/inputnumber/InputNumber.vue
+++ b/components/lib/inputnumber/InputNumber.vue
@@ -10,6 +10,7 @@
             :aria-valuemin="min"
             :aria-valuemax="max"
             :aria-valuenow="modelValue"
+            :inputmode="mode === 'decimal' && !minFractionDigits ? 'numeric' : 'decimal'"
             :disabled="disabled"
             :readonly="readonly"
             :placeholder="placeholder"
@@ -19,6 +20,7 @@
             :variant="variant"
             @input="onUserInput"
             @keydown="onInputKeyDown"
+            @keypress="onInputKeyPress"
             @paste="onPaste"
             @click="onInputClick"
             @focus="onInputFocus"
@@ -355,8 +357,9 @@ export default {
                 return;
             }
 
-            if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) {
+            if (event.altKey || event.ctrlKey || event.metaKey) {
                 this.isSpecialChar = true;
+                this.lastValue = this.$refs.input.$el.value;
 
                 return;
             }
@@ -504,23 +507,26 @@ export default {
                     break;
 
                 default:
-                    if (this.readonly) {
-                        return;
-                    }
-
-                    event.preventDefault();
-
-                    let char = event.key;
-                    const isDecimalSign = this.isDecimalSign(char);
-                    const isMinusSign = this.isMinusSign(char);
-
-                    if (((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(char) >= 0 && Number(char) <= 9) || isMinusSign || isDecimalSign) {
-                        this.insert(event, char, { isDecimalSign, isMinusSign });
-                    }
-
                     break;
             }
         },
+        onInputKeyPress(event) {
+            if (this.readonly) {
+                return;
+            }
+
+            let char = event.key;
+            let isDecimalSign = this.isDecimalSign(char);
+            const isMinusSign = this.isMinusSign(char);
+
+            if (event.code !== 'Enter') {
+                event.preventDefault();
+            }
+
+            if ((Number(char) >= 0 && Number(char) <= 9) || isMinusSign || isDecimalSign) {
+                this.insert(event, char, { isDecimalSign, isMinusSign });
+            }
+        },
         onPaste(event) {
             event.preventDefault();
             let data = (event.clipboardData || window['clipboardData']).getData('Text');
@@ -830,10 +836,7 @@ export default {
                     this.$refs.input.$el.setSelectionRange(selectionEnd, selectionEnd);
                 } else if (newLength === currentLength) {
                     if (operation === 'insert' || operation === 'delete-back-single') {
-                        const re = /[.,]/g;
-                        const newSelectionEnd = selectionEnd + Number(re.test(value) || re.test(insertedValueStr));
-
-                        this.$refs.input.$el.setSelectionRange(newSelectionEnd, newSelectionEnd);
+                        this.$refs.input.$el.setSelectionRange(selectionEnd + 1, selectionEnd + 1);
                     } else if (operation === 'delete-single') {
                         this.$refs.input.$el.setSelectionRange(selectionEnd - 1, selectionEnd - 1);
                     } else if (operation === 'delete-range' || operation === 'spin') {
diff --git a/components/lib/inputotp/InputOtp.vue b/components/lib/inputotp/InputOtp.vue
index ec670ed1a..342ca421b 100755
--- a/components/lib/inputotp/InputOtp.vue
+++ b/components/lib/inputotp/InputOtp.vue
@@ -157,7 +157,7 @@ export default {
                     break;
 
                 default:
-                    if ((this.integerOnly && !((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(event.key) >= 0 && Number(event.key) <= 9)) || (this.tokens.join('').length >= this.length && event.code !== 'Delete')) {
+                    if ((this.integerOnly && !(Number(event.key) >= 0 && Number(event.key) <= 9)) || (this.tokens.join('').length >= this.length && event.code !== 'Delete')) {
                         event.preventDefault();
                     }
 
diff --git a/components/lib/knob/BaseKnob.vue b/components/lib/knob/BaseKnob.vue
index c1b9b9047..e0ed0d859 100644
--- a/components/lib/knob/BaseKnob.vue
+++ b/components/lib/knob/BaseKnob.vue
@@ -62,7 +62,7 @@ export default {
             default: true
         },
         valueTemplate: {
-            type: String,
+            type: [String, Function],
             default: '{value}'
         },
         tabindex: {
diff --git a/components/lib/knob/Knob.d.ts b/components/lib/knob/Knob.d.ts
index a1f9bbcd7..7d8851159 100644
--- a/components/lib/knob/Knob.d.ts
+++ b/components/lib/knob/Knob.d.ts
@@ -178,7 +178,7 @@ export interface KnobProps {
      * Template string of the value.
      * @defaultValue '{value}'
      */
-    valueTemplate?: string | undefined;
+    valueTemplate?: (val: number) => string | string | undefined;
     /**
      * Index of the element in tabbing order.
      * @defaultValue 0
diff --git a/components/lib/knob/Knob.spec.js b/components/lib/knob/Knob.spec.js
index 2fabc2e31..20ae2e992 100644
--- a/components/lib/knob/Knob.spec.js
+++ b/components/lib/knob/Knob.spec.js
@@ -44,4 +44,16 @@ describe('Knob.vue', () => {
 
         expect(wrapper.emitted()['update:modelValue'][0]).toEqual([30]);
     });
+
+    it('should work with string valueTemplate', async () => {
+        await wrapper.setProps({ valueTemplate: '{value}%' });
+
+        expect(wrapper.find('.p-knob-text').text()).toBe('20%');
+    });
+
+    it('should work with function valueTemplate', async () => {
+        await wrapper.setProps({ valueTemplate: (val) => val * 10 });
+
+        expect(wrapper.find('.p-knob-text').text()).toBe('200');
+    });
 });
diff --git a/components/lib/knob/Knob.vue b/components/lib/knob/Knob.vue
index b0cfe0430..21cbdea99 100644
--- a/components/lib/knob/Knob.vue
+++ b/components/lib/knob/Knob.vue
@@ -215,7 +215,11 @@ export default {
             return this.valueRadians > this.zeroRadians ? 0 : 1;
         },
         valueToDisplay() {
-            return this.valueTemplate.replace(/{value}/g, this.modelValue);
+            if (typeof this.valueTemplate === 'string') {
+                return this.valueTemplate.replace(/{value}/g, this.modelValue);
+            } else {
+                return this.valueTemplate(this.modelValue);
+            }
         }
     }
 };
diff --git a/components/lib/menu/Menu.vue b/components/lib/menu/Menu.vue
index 6229f227b..701329d8d 100644
--- a/components/lib/menu/Menu.vue
+++ b/components/lib/menu/Menu.vue
@@ -32,6 +32,7 @@
                                     :item="child"
                                     :templates="$slots"
                                     :focusedOptionId="focusedOptionId"
+                                    :unstyled="unstyled"
                                     @item-click="itemClick"
                                     @item-mousemove="itemMouseMove"
                                     :pt="pt"
@@ -40,7 +41,19 @@
                             </template>
                         </template>
                         <li v-else-if="visible(item) && item.separator" :key="'separator' + i.toString()" :class="[cx('separator'), item.class]" :style="item.style" role="separator" v-bind="ptm('separator')"></li>
-                        <PVMenuitem v-else :key="label(item) + i.toString()" :id="id + '_' + i" :item="item" :index="i" :templates="$slots" :focusedOptionId="focusedOptionId" @item-click="itemClick" @item-mousemove="itemMouseMove" :pt="pt" />
+                        <PVMenuitem
+                            v-else
+                            :key="label(item) + i.toString()"
+                            :id="id + '_' + i"
+                            :item="item"
+                            :index="i"
+                            :templates="$slots"
+                            :focusedOptionId="focusedOptionId"
+                            :unstyled="unstyled"
+                            @item-click="itemClick"
+                            @item-mousemove="itemMouseMove"
+                            :pt="pt"
+                        />
                     </template>
                 </ul>
                 <div v-if="$slots.end" :class="cx('end')" v-bind="ptm('end')">
diff --git a/components/lib/multiselect/MultiSelect.vue b/components/lib/multiselect/MultiSelect.vue
index 4441f2343..18de88fe6 100755
--- a/components/lib/multiselect/MultiSelect.vue
+++ b/components/lib/multiselect/MultiSelect.vue
@@ -117,7 +117,7 @@
                     <div :class="cx('wrapper')" :style="{ 'max-height': virtualScrollerDisabled ? scrollHeight : '' }" v-bind="ptm('wrapper')">
                         <VirtualScroller :ref="virtualScrollerRef" v-bind="virtualScrollerOptions" :items="visibleOptions" :style="{ height: scrollHeight }" :tabindex="-1" :disabled="virtualScrollerDisabled" :pt="ptm('virtualScroller')">
                             <template v-slot:content="{ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }">
-                                <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" aria-multiselectable="true" v-bind="ptm('list')">
+                                <ul :ref="(el) => listRef(el, contentRef)" :id="id + '_list'" :class="[cx('list'), styleClass]" :style="contentStyle" role="listbox" aria-multiselectable="true" :aria-label="listAriaLabel" v-bind="ptm('list')">
                                     <template v-for="(option, i) of items" :key="getOptionRenderKey(option, getOptionIndex(i, getItemOptions))">
                                         <li v-if="isOptionGroup(option)" :id="id + '_' + getOptionIndex(i, getItemOptions)" :style="{ height: itemSize ? itemSize + 'px' : undefined }" :class="cx('itemGroup')" role="option" v-bind="ptm('itemGroup')">
                                             <slot name="optiongroup" :option="option.optionGroup" :index="getOptionIndex(i, getItemOptions)">{{ getOptionGroupLabel(option.optionGroup) }}</slot>
@@ -1082,6 +1082,12 @@ export default {
         toggleAllAriaLabel() {
             return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria[this.allSelected ? 'selectAll' : 'unselectAll'] : undefined;
         },
+        closeAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
+        },
+        listAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.listLabel : undefined;
+        },
         virtualScrollerDisabled() {
             return !this.virtualScrollerOptions;
         }
diff --git a/components/lib/paginator/Paginator.vue b/components/lib/paginator/Paginator.vue
index 8bc47861b..e343fb26e 100755
--- a/components/lib/paginator/Paginator.vue
+++ b/components/lib/paginator/Paginator.vue
@@ -175,7 +175,6 @@ export default {
                         innerHTML += `
                             @media screen ${minValue} {
                                 .paginator[${this.attributeSelector}],
-                                .p-paginator-default{
                                     display: flex;
                                 }
                             }
diff --git a/components/lib/scrollpanel/ScrollPanel.vue b/components/lib/scrollpanel/ScrollPanel.vue
index b939d79ef..3999b4f09 100644
--- a/components/lib/scrollpanel/ScrollPanel.vue
+++ b/components/lib/scrollpanel/ScrollPanel.vue
@@ -129,22 +129,27 @@ export default {
                 this.scrollYRatio = ownHeight / totalHeight;
 
                 this.frame = this.requestAnimationFrame(() => {
-                    if (this.scrollXRatio >= 1) {
-                        this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
-                        !this.isUnstyled && DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-hidden');
-                    } else {
-                        this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
-                        !this.isUnstyled && DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
-                        this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
+                    if (this.$refs.xBar) {
+                        if (this.scrollXRatio >= 1) {
+                            this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'true');
+                            !this.isUnstyled && DomHandler.addClass(this.$refs.xBar, 'p-scrollpanel-hidden');
+                        } else {
+                            this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
+                            !this.isUnstyled && DomHandler.removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
+                            this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
+                        }
                     }
 
-                    if (this.scrollYRatio >= 1) {
-                        this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
-                        !this.isUnstyled && DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-hidden');
-                    } else {
-                        this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
-                        !this.isUnstyled && DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-hidden');
-                        this.$refs.yBar.style.cssText = 'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
+                    if (this.$refs.yBar) {
+                        if (this.scrollYRatio >= 1) {
+                            this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'true');
+                            !this.isUnstyled && DomHandler.addClass(this.$refs.yBar, 'p-scrollpanel-hidden');
+                        } else {
+                            this.$refs.yBar.setAttribute('data-p-scrollpanel-hidden', 'false');
+                            !this.isUnstyled && DomHandler.removeClass(this.$refs.yBar, 'p-scrollpanel-hidden');
+                            this.$refs.yBar.style.cssText =
+                                'height:' + Math.max(this.scrollYRatio * 100, 10) + '%; top: calc(' + (this.$refs.content.scrollTop / totalHeight) * 100 + '% - ' + this.$refs.xBar.clientHeight + 'px);right:' + right + 'px;';
+                        }
                     }
                 });
             }
diff --git a/components/lib/stepper/Stepper.vue b/components/lib/stepper/Stepper.vue
index 1b5077e90..04f3a4c84 100644
--- a/components/lib/stepper/Stepper.vue
+++ b/components/lib/stepper/Stepper.vue
@@ -31,6 +31,7 @@
                             :clickCallback="(event) => onItemClick(event, index)"
                             :getStepPT="getStepPT"
                             :getStepProp="getStepProp"
+                            :unstyled="unstyled"
                         />
                     </slot>
                     <slot v-if="index !== stepperpanels.length - 1" name="separator">
@@ -42,6 +43,7 @@
                             :active="isStepActive(index)"
                             :highlighted="index < d_activeStep"
                             :getStepPT="getStepPT(step, 'separator', index)"
+                            :unstyled="unstyled"
                         />
                     </slot>
                 </li>
@@ -61,6 +63,7 @@
                         :nextCallback="(event) => nextCallback(event, index)"
                         :getStepPT="getStepPT"
                         :aria-labelledby="getStepHeaderActionId(index)"
+                        :unstyled="unstyled"
                     />
                 </template>
             </div>
diff --git a/components/lib/toast/Toast.vue b/components/lib/toast/Toast.vue
index fbe64db2b..05f3617d7 100755
--- a/components/lib/toast/Toast.vue
+++ b/components/lib/toast/Toast.vue
@@ -72,17 +72,12 @@ export default {
             this.messages = [...this.messages, message];
         },
         remove(params) {
-            let index = -1;
+            const index = this.messages.findIndex((m) => m.id === params.message.id);
 
-            for (let i = 0; i < this.messages.length; i++) {
-                if (this.messages[i] === params.message) {
-                    index = i;
-                    break;
-                }
+            if (index !== -1) {
+                this.messages.splice(index, 1);
+                this.$emit(params.type, { message: params.message });
             }
-
-            this.messages.splice(index, 1);
-            this.$emit(params.type, { message: params.message });
         },
         onAdd(message) {
             if (this.group == message.group) {
diff --git a/components/lib/tree/TreeNode.vue b/components/lib/tree/TreeNode.vue
index 97b9bd372..2a16c1a35 100755
--- a/components/lib/tree/TreeNode.vue
+++ b/components/lib/tree/TreeNode.vue
@@ -31,7 +31,7 @@
                     <component v-if="templates['checkboxicon']" :is="templates['checkboxicon']" :checked="slotProps.checked" :partialChecked="partialChecked" :class="slotProps.class" />
                 </template>
             </Checkbox>
-            <component v-if="templates['nodeicon']" :is="templates['nodeicon']" :node="node" :class="[cx('nodeIcon')]"></component>
+            <component v-if="templates['nodeicon']" :is="templates['nodeicon']" :node="node" :class="[cx('nodeIcon')]" v-bind="getPTOptions('nodeIcon')"></component>
             <span v-else :class="[cx('nodeIcon'), node.icon]" v-bind="getPTOptions('nodeIcon')"></span>
             <span :class="cx('label')" v-bind="getPTOptions('label')" @keydown.stop>
                 <component v-if="templates[node.type] || templates['default']" :is="templates[node.type] || templates['default']" :node="node" />
diff --git a/components/lib/treetable/TreeTable.vue b/components/lib/treetable/TreeTable.vue
index f2dea75de..0c48e2dc0 100755
--- a/components/lib/treetable/TreeTable.vue
+++ b/components/lib/treetable/TreeTable.vue
@@ -488,12 +488,12 @@ export default {
 
                 for (let j = 0; j < this.columns.length; j++) {
                     let col = this.columns[j];
-                    let filterField = this.columnProp(col, 'field');
+                    let filterField = this.columnProp(col, 'filterField') || this.columnProp(col, 'field');
 
                     //local
-                    if (Object.prototype.hasOwnProperty.call(this.filters, this.columnProp(col, 'field'))) {
+                    if (Object.prototype.hasOwnProperty.call(this.filters, filterField)) {
                         let filterMatchMode = this.columnProp(col, 'filterMatchMode') || 'startsWith';
-                        let filterValue = this.filters[this.columnProp(col, 'field')];
+                        let filterValue = this.filters[filterField];
                         let filterConstraint = FilterService.filters[filterMatchMode];
                         let paramsWithoutNode = { filterField, filterValue, filterConstraint, strict };
 
diff --git a/doc/autocomplete/ForceSelectionDoc.vue b/doc/autocomplete/ForceSelectionDoc.vue
index 91f366512..60470a499 100644
--- a/doc/autocomplete/ForceSelectionDoc.vue
+++ b/doc/autocomplete/ForceSelectionDoc.vue
@@ -6,39 +6,56 @@
         </p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />
+        <AutoComplete v-model="selectedCountry" forceSelection optionLabel="name" :suggestions="filteredCountries" @complete="search" />
     </div>
-    <DocSectionCode :code="code" />
+    <DocSectionCode :code="code" :service="['CountryService']" />
 </template>
 
 <script>
+import { CountryService } from '@/service/CountryService';
+
 export default {
     data() {
         return {
-            value: '',
-            items: [],
+            countries: null,
+            selectedCountry: null,
+            filteredCountries: null,
             code: {
                 basic: `
-<AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />
+<AutoComplete v-model="selectedCountry" forceSelection optionLabel="name" :suggestions="filteredCountries" @complete="search" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />
+        <AutoComplete v-model="selectedCountry" forceSelection optionLabel="name" :suggestions="filteredCountries" @complete="search" />
     </div>
 </template>
 
 <script>
+import { CountryService } from '@/service/CountryService';
+
 export default {
     data() {
         return {
-            value: '',
-            items: []
+            countries: null,
+            selectedCountry: null,
+            filteredCountries: null
         };
     },
+    mounted() {
+        CountryService.getCountries().then((data) => (this.countries = data));
+    },
     methods: {
         search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+            setTimeout(() => {
+                if (!event.query.trim().length) {
+                    this.filteredCountries = [...this.countries];
+                } else {
+                    this.filteredCountries = this.countries.filter((country) => {
+                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                    });
+                }
+            }, 250);
         }
     }
 };
@@ -47,27 +64,53 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <AutoComplete v-model="value" :suggestions="items" @complete="search" forceSelection />
+        <AutoComplete v-model="selectedCountry" forceSelection optionLabel="name" :suggestions="filteredCountries" @complete="search" />
     </div>
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, onMounted } from "vue";
+import { CountryService } from "@/service/CountryService";
+
+onMounted(() => {
+    CountryService.getCountries().then((data) => (countries.value = data));
+});
+
+const countries = ref();
+const selectedCountry = ref();
+const filteredCountries = ref();
 
-const value = ref("");
-const items = ref([]);
 
 const search = (event) => {
-    items.value = [...Array(10).keys()].map((item) => event.query + '-' + item);
+    setTimeout(() => {
+        if (!event.query.trim().length) {
+            filteredCountries.value = [...countries.value];
+        } else {
+            filteredCountries.value = countries.value.filter((country) => {
+                return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+            });
+        }
+    }, 250);
 }
 <\/script>
 `
             }
         };
     },
+    mounted() {
+        CountryService.getCountries().then((data) => (this.countries = data));
+    },
     methods: {
         search(event) {
-            this.items = [...Array(10).keys()].map((item) => event.query + '-' + item);
+            setTimeout(() => {
+                if (!event.query.trim().length) {
+                    this.filteredCountries = [...this.countries];
+                } else {
+                    this.filteredCountries = this.countries.filter((country) => {
+                        return country.name.toLowerCase().startsWith(event.query.toLowerCase());
+                    });
+                }
+            }, 250);
         }
     }
 };
diff --git a/doc/breadcrumb/TemplateDoc.vue b/doc/breadcrumb/TemplateDoc.vue
index 7a7a22c7b..e559dc25d 100644
--- a/doc/breadcrumb/TemplateDoc.vue
+++ b/doc/breadcrumb/TemplateDoc.vue
@@ -24,14 +24,12 @@ export default {
             code: {
                 basic: `
 <Breadcrumb :home="home" :model="items">
-    <template #item="item">
-        <template #item="{ item }">
-            <a class="cursor-pointer" :href="item.url">
-                <span :class="item.icon"></span>
-            </a>
-        </template>
-        <template #separator> / </template>
+    <template #item="{ item }">
+        <a class="cursor-pointer" :href="item.url">
+            <span :class="item.icon"></span>
+        </a>
     </template>
+    <template #separator> / </template>
 </Breadcrumb>
 `,
                 options: `
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 1fcc6154a..aa54a2310 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -17159,6 +17159,13 @@
                             "readonly": false,
                             "type": "string",
                             "default": ""
+                        },
+                        {
+                            "name": "listLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
                         }
                     ],
                     "methods": []
@@ -35484,6 +35491,14 @@
                             "type": "undefined | string | number",
                             "default": "",
                             "description": "New value"
+                        },
+                        {
+                            "name": "formattedValue",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "currentValue"
                         }
                     ],
                     "methods": []
@@ -37575,9 +37590,8 @@
                             "name": "valueTemplate",
                             "optional": true,
                             "readonly": false,
-                            "type": "string",
-                            "default": "'{value}'",
-                            "description": "Template string of the value."
+                            "type": "Function",
+                            "default": ""
                         },
                         {
                             "name": "tabindex",
diff --git a/doc/contextmenu/CommandDoc.vue b/doc/contextmenu/CommandDoc.vue
index 84684fd64..ac0cc2a7c 100644
--- a/doc/contextmenu/CommandDoc.vue
+++ b/doc/contextmenu/CommandDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>ContextMenu requires a collection of menuitems as its <i>model</i> and the <i>show</i> method needs to be called explicity using an event of the target like <i>contextmenu</i> to display the menu.</p>
+        <p>The <i>command</i> property defines the callback to run when an item is activated by click or a key event.</p>
     </DocSectionText>
     <div class="card flex md:justify-content-center">
         <ul class="m-0 p-0 list-none border-1 surface-border border-round p-3 flex flex-column gap-2 w-full md:w-30rem">
diff --git a/doc/dialog/LongContentDoc.vue b/doc/dialog/LongContentDoc.vue
index 25470abe8..5281cba6d 100644
--- a/doc/dialog/LongContentDoc.vue
+++ b/doc/dialog/LongContentDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>When content exceeeds viewport, Dialog automatically becomes scrollable.</p>
+        <p>When content exceeds viewport, Dialog automatically becomes scrollable.</p>
     </DocSectionText>
 
     <div class="card flex justify-content-center">
diff --git a/doc/knob/TemplateDoc.vue b/doc/knob/TemplateDoc.vue
index 2feb4e258..08cc2278c 100644
--- a/doc/knob/TemplateDoc.vue
+++ b/doc/knob/TemplateDoc.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText v-bind="$attrs">
-        <p>Label is a string template that can be customized with the <i>valueTemplate</i> property having <i>60</i> as the placeholder .</p>
+        <p>The label can be customized with the <i>valueTemplate</i> property using either a template string or a function.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
         <Knob v-model="value" valueTemplate="{value}%" />
diff --git a/doc/menubar/RouterDoc.vue b/doc/menubar/RouterDoc.vue
index 9c1043bf2..9ae620705 100644
--- a/doc/menubar/RouterDoc.vue
+++ b/doc/menubar/RouterDoc.vue
@@ -58,7 +58,7 @@ export default {
                         },
                         {
                             label: 'Vite.js',
-                            url: 'https://vuejs.org/'
+                            url: 'https://vitejs.dev/'
                         }
                     ]
                 }
@@ -138,7 +138,7 @@ export default {
                         },
                         {
                             label: 'Vite.js',
-                            url: 'https://vuejs.org/'
+                            url: 'https://vitejs.dev/'
                         }
                     ]
                 }
@@ -207,7 +207,7 @@ const items = ref([
             },
             {
                 label: 'Vite.js',
-                url: 'https://vuejs.org/'
+                url: 'https://vitejs.dev/'
             }
         ]
     }
diff --git a/doc/nuxt/configuration/ComponentsDoc.vue b/doc/nuxt/configuration/ComponentsDoc.vue
index 890c9f13d..d6001da4b 100644
--- a/doc/nuxt/configuration/ComponentsDoc.vue
+++ b/doc/nuxt/configuration/ComponentsDoc.vue
@@ -4,13 +4,15 @@
         <DocSectionCode :code="code1" importCode hideToggleCode hideStackBlitz />
         <p>In case all components are imported, particular components can still be excluded with the <i>exclude</i> option.</p>
         <DocSectionCode :code="code2" importCode hideToggleCode hideStackBlitz />
-        <p>Use the <i>prefix</i> option to give a prefix to the registered component names.</p>
+        <p>By default, for compatibility reasons, Chart and Editor components are excluded. To include them simply set the <i>exclude</i> option to an empty list.</p>
         <DocSectionCode :code="code3" importCode hideToggleCode hideStackBlitz />
+        <p>Use the <i>prefix</i> option to give a prefix to the registered component names.</p>
+        <DocSectionCode :code="code4" importCode hideToggleCode hideStackBlitz />
         <p>
             Component registration can be customized further by implementing the <i>name</i> function that gets an object representing the import metadata. <i>name</i> is the label of the component, <i>as</i> is the default export name and
             <i>from</i> is the import path.
         </p>
-        <DocSectionCode :code="code4" importCode hideToggleCode hideStackBlitz />
+        <DocSectionCode :code="code5" importCode hideToggleCode hideStackBlitz />
     </DocSectionText>
 </template>
 
@@ -39,6 +41,15 @@ primevue: {
             },
             code3: {
                 basic: `
+primevue: {
+    components: {
+        exclude: []
+    }
+}
+`
+            },
+            code4: {
+                basic: `
 primevue: {
     components: {
         prefix: 'Prime'
@@ -47,7 +58,7 @@ primevue: {
 }
 `
             },
-            code4: {
+            code5: {
                 basic: `
 primevue: {
     components: {
diff --git a/doc/select/theming/StyledDoc.vue b/doc/select/theming/StyledDoc.vue
index 4508958cf..e407a4f27 100644
--- a/doc/select/theming/StyledDoc.vue
+++ b/doc/select/theming/StyledDoc.vue
@@ -55,6 +55,10 @@
                     <td>p-focus</td>
                     <td>Container element when it is in focus.</td>
                 </tr>
+                <tr>
+                    <td>p-highlight</td>
+                    <td>Container element when it is selected.</td>
+                </tr>
             </tbody>
         </table>
     </div>
diff --git a/doc/tree/LazyDoc.vue b/doc/tree/LazyDoc.vue
index 41fd65a39..7e5e9f6a3 100644
--- a/doc/tree/LazyDoc.vue
+++ b/doc/tree/LazyDoc.vue
@@ -7,11 +7,11 @@
     </DocSectionText>
     <div class="card flex flex-wrap p-fluid gap-3">
         <div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column">
-            <label for="mask" class="font-bold block mb-2">Mask Mode</label>
+            <label class="font-bold block mb-2">Mask Mode</label>
             <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree>
         </div>
         <div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column">
-            <label for="mask" class="font-bold block mb-2">Icon Mode</label>
+            <label class="font-bold block mb-2">Icon Mode</label>
             <Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-30rem"></Tree>
         </div>
     </div>
@@ -34,11 +34,11 @@ export default {
 <template>
     <div class="card flex flex-wrap p-fluid gap-3">
         <div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column">
-            <label for="mask" class="font-bold block mb-2">Mask Mode</label>
+            <label class="font-bold block mb-2">Mask Mode</label>
             <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree>
         </div>
         <div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column">
-            <label for="mask" class="font-bold block mb-2">Icon Mode</label>
+            <label class="font-bold block mb-2">Icon Mode</label>
             <Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-30rem"></Tree>
         </div>
     </div>
@@ -55,10 +55,10 @@ export default {
     },
     mounted() {
         this.loading = true;
-        this.nodes2 = this.initateNodes2();
+        this.nodes2 = this.initiateNodes2();
 
         setTimeout(() => {
-            this.nodes = this.initateNodes();
+            this.nodes = this.initiateNodes();
             this.loading = false;
             this.nodes2.map((node) => (node.loading = false));
         }, 2000);
@@ -112,7 +112,7 @@ export default {
                 }, 500);
             }
         },
-        initateNodes() {
+        initiateNodes() {
             return [
                 {
                     key: '0',
@@ -131,7 +131,7 @@ export default {
                 }
             ];
         },
-        initateNodes2() {
+        initiateNodes2() {
             return [
                 {
                     key: '0',
@@ -161,11 +161,11 @@ export default {
 <template>
     <div class="card flex flex-wrap p-fluid gap-3">
         <div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column">
-            <label for="mask" class="font-bold block mb-2">Mask Mode</label>
+            <label class="font-bold block mb-2">Mask Mode</label>
             <Tree :value="nodes" @node-expand="onNodeExpand" :loading="loading" class="w-full md:w-30rem"></Tree>
         </div>
         <div class="flex-auto md:flex md:justify-content-start md:align-items-center flex-column">
-            <label for="mask" class="font-bold block mb-2">Icon Mode</label>
+            <label class="font-bold block mb-2">Icon Mode</label>
             <Tree :value="nodes2" @node-expand="onNodeExpand2" loadingMode="icon" class="w-full md:w-30rem"></Tree>
         </div>
     </div>
@@ -183,7 +183,7 @@ onMounted(() => {
     nodes2.value = initiateNodes2();
 
     setTimeout(() => {
-        nodes.value = initateNodes();
+        nodes.value = initiateNodes();
         loading.value = false;
         nodes2.value.map((node) => (node.loading = false));
     }, 2000);
@@ -239,7 +239,7 @@ const onNodeExpand2 = (node) => {
     }
 };
 
-const initateNodes = () => {
+const initiateNodes = () => {
     return [
         {
             key: '0',
@@ -259,7 +259,7 @@ const initateNodes = () => {
     ];
 };
 
-const initateNodes2 = () => {
+const initiateNodes2 = () => {
     return [
         {
             key: '0',
@@ -315,10 +315,10 @@ const initateNodes2 = () => {
     },
     mounted() {
         this.loading = true;
-        this.nodes2 = this.initateNodes2();
+        this.nodes2 = this.initiateNodes2();
 
         setTimeout(() => {
-            this.nodes = this.initateNodes();
+            this.nodes = this.initiateNodes();
             this.loading = false;
             this.nodes2.map((node) => (node.loading = false));
         }, 2000);
@@ -373,7 +373,7 @@ const initateNodes2 = () => {
                 }, 500);
             }
         },
-        initateNodes() {
+        initiateNodes() {
             return [
                 {
                     key: '0',
@@ -392,7 +392,7 @@ const initateNodes2 = () => {
                 }
             ];
         },
-        initateNodes2() {
+        initiateNodes2() {
             return [
                 {
                     key: '0',
diff --git a/doc/treeselect/FilledDoc.vue b/doc/treeselect/FilledDoc.vue
index 675bbb066..b7832ec46 100644
--- a/doc/treeselect/FilledDoc.vue
+++ b/doc/treeselect/FilledDoc.vue
@@ -18,12 +18,12 @@ export default {
             selectedValue: null,
             code: {
                 basic: `
-<TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
+<TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
+        <TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
     </div>
 </template>
 
@@ -46,7 +46,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <TreeSelect v-model="selectedValue" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
+        <TreeSelect v-model="selectedValue" variant="filled" :options="nodes" placeholder="Select Item" class="md:w-20rem w-full" />
     </div>
 </template>