primevue 3.17.0 → 3.18.0

package/core/core.js

@@ -452,6 +452,14 @@ this.primevue.utils = (function (exports) {
             }
         },
 
+        getSelection() {
+            if (window.getSelection) return window.getSelection().toString();
+            else if (document.getSelection) return document.getSelection().toString();
+            else if (document['selection']) return document['selection'].createRange().text;
+
+            return null;
+        },
+
         calculateScrollbarWidth() {
             if (this.calculatedScrollbarWidth != null) return this.calculatedScrollbarWidth;
 
@@ -866,6 +874,24 @@ this.primevue.utils = (function (exports) {
             return this.isNotEmpty(char) && char.length === 1 && char.match(/\S| /);
         },
 
+        /**
+         * Firefox-v103 does not currently support the "findLast" method. It is stated that this method will be supported with Firefox-v104.
+         * https://caniuse.com/mdn-javascript_builtins_array_findlast
+         */
+        findLast(arr, callback) {
+            let item;
+
+            if (this.isNotEmpty(arr)) {
+                try {
+                    item = arr.findLast(callback);
+                } catch {
+                    item = [...arr].reverse().find(callback);
+                }
+            }
+
+            return item;
+        },
+
         /**
          * Firefox-v103 does not currently support the "findLastIndex" method. It is stated that this method will be supported with Firefox-v104.
          * https://caniuse.com/mdn-javascript_builtins_array_findlastindex
@@ -1258,16 +1284,19 @@ this.primevue.api = (function (exports, utils) {
         ARROW_DOWN_RIGHT: 'pi pi-arrow-down-right',
         ARROW_LEFT: 'pi pi-arrow-left',
         ARROW_RIGHT: 'pi pi-arrow-right',
+        ARROW_RIGHT_ARROW_LEFT: 'pi pi-arrow-right-arrow-left',
         ARROW_UP: 'pi pi-arrow-up',
         ARROW_UP_LEFT: 'pi pi-arrow-up-left',
         ARROW_UP_RIGHT: 'pi pi-arrow-up-right',
-        ARROW_H: 'pi pi-arrow-h',
-        ARROW_V: 'pi pi-arrow-v',
+        ARROW_H: 'pi pi-arrows-h',
+        ARROW_V: 'pi pi-arrows-v',
+        ARROW_A: 'pi pi-arrows-alt',
         AT: 'pi pi-at',
         BACKWARD: 'pi pi-backward',
         BAN: 'pi pi-ban',
         BARS: 'pi pi-bars',
         BELL: 'pi pi-bell',
+        BITCOIN: 'pi pi-bitcoin',
         BOLT: 'pi pi-bolt',
         BOOK: 'pi pi-book',
         BOOKMARK: 'pi pi-bookmark',
@@ -1279,12 +1308,14 @@ this.primevue.api = (function (exports, utils) {
         CALENDAR_MINUS: 'pi pi-calendar-minus',
         CALENDAR_PLUS: 'pi pi-calendar-plus',
         CALENDAR_TIMES: 'pi pi-calendar-times',
+        CALCULATOR: 'pi pi-calculator',
         CAMERA: 'pi pi-camera',
         CAR: 'pi pi-car',
         CARET_DOWN: 'pi pi-caret-down',
         CARET_LEFT: 'pi pi-caret-left',
         CARET_RIGHT: 'pi pi-caret-right',
         CARET_UP: 'pi pi-caret-up',
+        CART_PLUS: 'pi pi-cart-plus',
         CHART_BAR: 'pi pi-chart-bar',
         CHART_LINE: 'pi pi-chart-line',
         CHART_PIE: 'pi pi-chart-pie',
@@ -1314,6 +1345,7 @@ this.primevue.api = (function (exports, utils) {
         COPY: 'pi pi-copy',
         CREDIT_CARD: 'pi pi-credit-card',
         DATABASE: 'pi pi-database',
+        DELETELEFT: 'pi pi-delete-left',
         DESKTOP: 'pi pi-desktop',
         DIRECTIONS: 'pi pi-directions',
         DIRECTIONS_ALT: 'pi pi-directions-alt',
@@ -1324,6 +1356,7 @@ this.primevue.api = (function (exports, utils) {
         ELLIPSIS_H: 'pi pi-ellipsis-h',
         ELLIPSIS_V: 'pi pi-ellipsis-v',
         ENVELOPE: 'pi pi-envelope',
+        ERASER: 'pi pi-eraser',
         EURO: 'pi pi-euro',
         EXCLAMATION_CIRCLE: 'pi pi-exclamation-circle',
         EXCLAMATION_TRIANGLE: 'pi pi-exclamation-triangle',
@@ -1334,8 +1367,12 @@ this.primevue.api = (function (exports, utils) {
         FAST_BACKWARD: 'pi pi-fast-backward',
         FAST_FORWARD: 'pi pi-fast-forward',
         FILE: 'pi pi-file',
+        FILE_EDIT: 'pi pi-file-edit',
         FILE_EXCEL: 'pi pi-file-excel',
+        FILE_EXPORT: 'pi pi-file-export',
+        FILE_IMPORT: 'pi pi-file-import',
         FILE_PDF: 'pi pi-file-pdf',
+        FILE_WORD: 'pi pi-file-word',
         FILTER: 'pi pi-filter',
         FILTER_FILL: 'pi pi-filter-fill',
         FILTER_SLASH: 'pi pi-filter-slash',
@@ -1344,6 +1381,7 @@ this.primevue.api = (function (exports, utils) {
         FOLDER: 'pi pi-folder',
         FOLDER_OPEN: 'pi pi-folder-open',
         FORWARD: 'pi pi-forward',
+        GIFT: 'pi pi-gift',
         GITHUB: 'pi pi-github',
         GLOBE: 'pi pi-globe',
         GOOGLE: 'pi pi-google',
@@ -1351,6 +1389,7 @@ this.primevue.api = (function (exports, utils) {
         HEART: 'pi pi-heart',
         HEART_FILL: 'pi pi-heart-fill',
         HISTORY: 'pi pi-history',
+        HOURGLASS: 'pi pi-hourglass',
         HOME: 'pi pi-home',
         ID_CARD: 'pi pi-id-card',
         IMAGE: 'pi pi-image',
@@ -1360,6 +1399,7 @@ this.primevue.api = (function (exports, utils) {
         INFO_CIRCLE: 'pi pi-info-circle',
         INSTAGRAM: 'pi pi-instagram',
         KEY: 'pi pi-key',
+        LANGUAGE: 'pi pi-language',
         LINK: 'pi pi-link',
         LINKEDIN: 'pi pi-linkedin',
         LIST: 'pi pi-list',
@@ -1367,6 +1407,8 @@ this.primevue.api = (function (exports, utils) {
         LOCK_OPEN: 'pi pi-lock-open',
         MAP: 'pi pi-map',
         MAP_MARKER: 'pi pi-map-marker',
+        MEGAPHONE: 'pi pi-megaphone',
+        MICREPHONE: 'pi pi-microphone',
         MICROSOFT: 'pi pi-microsoft',
         MINUS: 'pi pi-minus',
         MINUS_CIRCLE: 'pi pi-minus-circle',
@@ -1435,6 +1477,7 @@ this.primevue.api = (function (exports, utils) {
         STEP_FORWARD: 'pi pi-step-forward',
         STEP_FORWARD_ALT: 'pi pi-step-forward-alt',
         STOP: 'pi pi-stop',
+        STOPWATCH: 'pi pi-stop-watch',
         STOP_CIRCLE: 'pi pi-stop-circle',
         SUN: 'pi pi-sun',
         SYNC: 'pi pi-sync',
@@ -1445,11 +1488,14 @@ this.primevue.api = (function (exports, utils) {
         TELEGRAM: 'pi pi-telegram',
         TH_LARGE: 'pi pi-th-large',
         THUMBS_DOWN: 'pi pi-thumbs-down',
+        THUMBS_DOWN_FILL: 'pi pi-thumbs-down-fill',
         THUMBS_UP: 'pi pi-thumbs-up',
+        THUMBS_UP_FILL: 'pi pi-thumbs-up-fill',
         TICKET: 'pi pi-ticket',
         TIMES: 'pi pi-times',
         TIMES_CIRCLE: 'pi pi-times-circle',
         TRASH: 'pi pi-trash',
+        TRUCK: 'pi pi-truck',
         TWITTER: 'pi pi-twitter',
         UNDO: 'pi pi-undo',
         UNLOCK: 'pi pi-unlock',
@@ -1459,6 +1505,7 @@ this.primevue.api = (function (exports, utils) {
         USER_MINUS: 'pi pi-user-minus',
         USER_PLUS: 'pi pi-user-plus',
         USERS: 'pi pi-users',
+        VERIFIED: 'pi pi-verified',
         VIDEO: 'pi pi-video',
         VIMEO: 'pi pi-vimeo',
         VOLUME_DOWN: 'pi pi-volume-down',
@@ -1469,6 +1516,7 @@ this.primevue.api = (function (exports, utils) {
         WIFI: 'pi pi-wifi',
         WINDOW_MAXIMIZE: 'pi pi-window-maximize',
         WINDOW_MINIMIZE: 'pi pi-window-minimize',
+        WRENCH: 'pi pi-wrench',
         YOUTUBE: 'pi pi-youtube'
     };
 
@@ -1492,7 +1540,7 @@ this.primevue.api = (function (exports, utils) {
 })({}, primevue.utils);
 
 this.primevue = this.primevue || {};
-this.primevue.config = (function (exports, vue, api) {
+this.primevue.config = (function (exports, api, vue) {
     'use strict';
 
     const defaultOptions = {
@@ -1525,6 +1573,8 @@ this.primevue.config = (function (exports, vue, api) {
             choose: 'Choose',
             upload: 'Upload',
             cancel: 'Cancel',
+            completed: 'Completed',
+            pending: 'Pending',
             dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
             dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
             dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
@@ -1571,7 +1621,8 @@ this.primevue.config = (function (exports, vue, api) {
                 unselectAll: 'All items unselected',
                 close: 'Close',
                 previous: 'Previous',
-                next: 'Next'
+                next: 'Next',
+                navigation: 'Navigation'
             }
         },
         filterMatchModeOptions: {
@@ -1618,12 +1669,14 @@ this.primevue.config = (function (exports, vue, api) {
 
     return exports;
 
-})({}, Vue, primevue.api);
+})({}, primevue.api, Vue);
 
 this.primevue = this.primevue || {};
 this.primevue.ripple = (function (utils) {
     'use strict';
 
+    let timeout;
+
     function bindEvents(el) {
         el.addEventListener('mousedown', onMouseDown);
     }
@@ -1676,9 +1729,19 @@ this.primevue.ripple = (function (utils) {
         ink.style.top = y + 'px';
         ink.style.left = x + 'px';
         utils.DomHandler.addClass(ink, 'p-ink-active');
+
+        timeout = setTimeout(() => {
+            if (ink) {
+                utils.DomHandler.removeClass(ink, 'p-ink-active');
+            }
+        }, 401);
     }
 
     function onAnimationEnd(event) {
+        if (timeout) {
+            clearTimeout(timeout);
+        }
+
         utils.DomHandler.removeClass(event.currentTarget, 'p-ink-active');
     }
 
@@ -2925,10 +2988,12 @@ this.primevue.button = (function (Ripple, vue) {
         name: 'Button',
         props: {
             label: {
-                type: String
+                type: String,
+                default: null
             },
             icon: {
-                type: String
+                type: String,
+                default: null
             },
             iconPos: {
                 type: String,
@@ -2939,7 +3004,8 @@ this.primevue.button = (function (Ripple, vue) {
                 default: null
             },
             badge: {
-                type: String
+                type: String,
+                default: null
             },
             badgeClass: {
                 type: String,
@@ -3082,13 +3148,13 @@ this.primevue.inputtext = (function (vue) {
 })(Vue);
 
 this.primevue = this.primevue || {};
-this.primevue.inputnumber = (function (InputText, Button, vue) {
+this.primevue.inputnumber = (function (Button, InputText, utils, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-    var InputText__default = /*#__PURE__*/_interopDefaultLegacy(InputText);
     var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+    var InputText__default = /*#__PURE__*/_interopDefaultLegacy(InputText);
 
     var script = {
         name: 'InputNumber',
@@ -3885,7 +3951,9 @@ this.primevue.inputnumber = (function (InputText, Button, vue) {
                 return index || 0;
             },
             onInputClick() {
-                if (!this.readonly) {
+                const currentValue = this.$refs.input.$el.value;
+
+                if (!this.readonly && currentValue !== utils.DomHandler.getSelection()) {
                     this.initCursor();
                 }
             },
@@ -3918,7 +3986,7 @@ this.primevue.inputnumber = (function (InputText, Button, vue) {
             },
             handleOnInput(event, currentValue, newValue) {
                 if (this.isValueChanged(currentValue, newValue)) {
-                    this.$emit('input', { originalEvent: event, value: newValue });
+                    this.$emit('input', { originalEvent: event, value: newValue, formattedValue: currentValue });
                 }
             },
             isValueChanged(currentValue, newValue) {
@@ -4027,7 +4095,11 @@ this.primevue.inputnumber = (function (InputText, Button, vue) {
 
                     this._decimal.lastIndex = 0;
 
-                    return decimalCharIndex !== -1 ? val1.split(this._decimal)[0] + val2.slice(decimalCharIndex) : val1;
+                    if (this.suffixChar) {
+                        return val1.replace(this.suffixChar, '').split(this._decimal)[0] + val2.replace(this.suffixChar, '').slice(decimalCharIndex) + this.suffixChar;
+                    } else {
+                        return decimalCharIndex !== -1 ? val1.split(this._decimal)[0] + val2.slice(decimalCharIndex) : val1;
+                    }
                 }
 
                 return val1;
@@ -4257,7 +4329,7 @@ this.primevue.inputnumber = (function (InputText, Button, vue) {
 
     return script;
 
-})(primevue.inputtext, primevue.button, Vue);
+})(primevue.button, primevue.inputtext, primevue.utils, Vue);
 
 this.primevue = this.primevue || {};
 this.primevue.message = (function (Ripple, vue) {
@@ -4540,15 +4612,15 @@ this.primevue.progressbar = (function (vue) {
 })(Vue);
 
 this.primevue = this.primevue || {};
-this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, VirtualScroller, Portal, vue) {
+this.primevue.dropdown = (function (api, OverlayEventBus, Portal, Ripple, utils, VirtualScroller, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
     var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
+    var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
     var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
     var VirtualScroller__default = /*#__PURE__*/_interopDefaultLegacy(VirtualScroller);
-    var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
 
     var script = {
         name: 'Dropdown',
@@ -4634,6 +4706,18 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                 type: Boolean,
                 default: false
             },
+            clearIcon: {
+                type: String,
+                default: 'pi pi-times'
+            },
+            dropdownIcon: {
+                type: String,
+                default: 'pi pi-chevron-down'
+            },
+            filterIcon: {
+                type: String,
+                default: 'pi pi-search'
+            },
             loadingIcon: {
                 type: String,
                 default: 'pi pi-spinner pi-spin'
@@ -4793,7 +4877,7 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
             },
             onFocus(event) {
                 this.focused = true;
-                this.focusedOptionIndex = this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
+                this.focusedOptionIndex = this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : this.overlayVisible && this.autoOptionFocus ? this.findFirstFocusedOptionIndex() : -1;
                 this.overlayVisible && this.scrollInView(this.focusedOptionIndex);
                 this.$emit('focus', event);
             },
@@ -5340,7 +5424,7 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                 ];
             },
             dropdownIconClass() {
-                return ['p-dropdown-trigger-icon', this.loading ? this.loadingIcon : 'pi pi-chevron-down'];
+                return ['p-dropdown-trigger-icon', this.loading ? this.loadingIcon : this.dropdownIcon];
             },
             visibleOptions() {
                 const options = this.optionGroupLabel ? this.flatOptions(this.options) : this.options || [];
@@ -5419,32 +5503,31 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
     };
     const _hoisted_6 = { class: "p-dropdown-filter-container" };
     const _hoisted_7 = ["value", "placeholder", "aria-owns", "aria-activedescendant"];
-    const _hoisted_8 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-dropdown-filter-icon pi pi-search" }, null, -1);
-    const _hoisted_9 = {
+    const _hoisted_8 = {
       role: "status",
       "aria-live": "polite",
       class: "p-hidden-accessible"
     };
+    const _hoisted_9 = ["id"];
     const _hoisted_10 = ["id"];
-    const _hoisted_11 = ["id"];
-    const _hoisted_12 = ["id", "aria-label", "aria-selected", "aria-disabled", "aria-setsize", "aria-posinset", "onClick", "onMousemove"];
-    const _hoisted_13 = {
+    const _hoisted_11 = ["id", "aria-label", "aria-selected", "aria-disabled", "aria-setsize", "aria-posinset", "onClick", "onMousemove"];
+    const _hoisted_12 = {
       key: 0,
       class: "p-dropdown-empty-message",
       role: "option"
     };
-    const _hoisted_14 = {
+    const _hoisted_13 = {
       key: 1,
       class: "p-dropdown-empty-message",
       role: "option"
     };
-    const _hoisted_15 = {
+    const _hoisted_14 = {
       key: 0,
       role: "status",
       "aria-live": "polite",
       class: "p-hidden-accessible"
     };
-    const _hoisted_16 = {
+    const _hoisted_15 = {
       role: "status",
       "aria-live": "polite",
       class: "p-hidden-accessible"
@@ -5515,7 +5598,7 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
         ($props.showClear && $props.modelValue != null)
           ? (vue.openBlock(), vue.createElementBlock("i", vue.mergeProps({
               key: 2,
-              class: "p-dropdown-clear-icon pi pi-times",
+              class: ['p-dropdown-clear-icon', $props.clearIcon],
               onClick: _cache[7] || (_cache[7] = (...args) => ($options.onClearClick && $options.onClearClick(...args)))
             }, $props.clearIconProps), null, 16))
           : vue.createCommentVNode("", true),
@@ -5576,9 +5659,11 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                                 onBlur: _cache[11] || (_cache[11] = (...args) => ($options.onFilterBlur && $options.onFilterBlur(...args))),
                                 onInput: _cache[12] || (_cache[12] = (...args) => ($options.onFilterChange && $options.onFilterChange(...args)))
                               }, $props.filterInputProps), null, 16, _hoisted_7),
-                              _hoisted_8
+                              vue.createElementVNode("span", {
+                                class: vue.normalizeClass(['p-dropdown-filter-icon', $props.filterIcon])
+                              }, null, 2)
                             ]),
-                            vue.createElementVNode("span", _hoisted_9, vue.toDisplayString($options.filterResultMessageText), 1)
+                            vue.createElementVNode("span", _hoisted_8, vue.toDisplayString($options.filterResultMessageText), 1)
                           ]))
                         : vue.createCommentVNode("", true),
                       vue.createElementVNode("div", {
@@ -5617,7 +5702,7 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                                         }, () => [
                                           vue.createTextVNode(vue.toDisplayString($options.getOptionGroupLabel(option.optionGroup)), 1)
                                         ])
-                                      ], 12, _hoisted_11))
+                                      ], 12, _hoisted_10))
                                     : vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", {
                                         key: 1,
                                         id: $options.id + '_' + $options.getOptionIndex(i, getItemOptions),
@@ -5638,29 +5723,29 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
                                         }, () => [
                                           vue.createTextVNode(vue.toDisplayString($options.getOptionLabel(option)), 1)
                                         ])
-                                      ], 46, _hoisted_12)), [
+                                      ], 46, _hoisted_11)), [
                                         [_directive_ripple]
                                       ])
                                 ], 64))
                               }), 128)),
                               ($data.filterValue && (!items || (items && items.length === 0)))
-                                ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_13, [
+                                ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_12, [
                                     vue.renderSlot(_ctx.$slots, "emptyfilter", {}, () => [
                                       vue.createTextVNode(vue.toDisplayString($options.emptyFilterMessageText), 1)
                                     ])
                                   ]))
                                 : (!$props.options || ($props.options && $props.options.length === 0))
-                                  ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_14, [
+                                  ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_13, [
                                       vue.renderSlot(_ctx.$slots, "empty", {}, () => [
                                         vue.createTextVNode(vue.toDisplayString($options.emptyMessageText), 1)
                                       ])
                                     ]))
                                   : vue.createCommentVNode("", true)
-                            ], 14, _hoisted_10),
+                            ], 14, _hoisted_9),
                             (!$props.options || ($props.options && $props.options.length === 0))
-                              ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_15, vue.toDisplayString($options.emptyMessageText), 1))
+                              ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_14, vue.toDisplayString($options.emptyMessageText), 1))
                               : vue.createCommentVNode("", true),
-                            vue.createElementVNode("span", _hoisted_16, vue.toDisplayString($options.selectedMessageText), 1)
+                            vue.createElementVNode("span", _hoisted_15, vue.toDisplayString($options.selectedMessageText), 1)
                           ]),
                           _: 2
                         }, [
@@ -5732,7 +5817,7 @@ this.primevue.dropdown = (function (utils, OverlayEventBus, api, Ripple, Virtual
 
     return script;
 
-})(primevue.utils, primevue.overlayeventbus, primevue.api, primevue.ripple, primevue.virtualscroller, primevue.portal, Vue);
+})(primevue.api, primevue.overlayeventbus, primevue.portal, primevue.ripple, primevue.utils, primevue.virtualscroller, Vue);
 
 this.primevue = this.primevue || {};
 this.primevue.dialog = (function (vue, utils, Ripple, Portal) {
@@ -6286,7 +6371,7 @@ this.primevue.dialog = (function (vue, utils, Ripple, Portal) {
 })(Vue, primevue.utils, primevue.ripple, primevue.portal);
 
 this.primevue = this.primevue || {};
-this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
+this.primevue.paginator = (function (utils, vue, Ripple, Dropdown, InputNumber) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -6387,6 +6472,84 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
     script$8.render = render$8;
 
     var script$7 = {
+        name: 'JumpToPageDropdown',
+        inheritAttrs: false,
+        emits: ['page-change'],
+        props: {
+            page: Number,
+            pageCount: Number,
+            disabled: Boolean
+        },
+        methods: {
+            onChange(value) {
+                this.$emit('page-change', value);
+            }
+        },
+        computed: {
+            pageOptions() {
+                let opts = [];
+
+                for (let i = 0; i < this.pageCount; i++) {
+                    opts.push({ label: String(i + 1), value: i });
+                }
+
+                return opts;
+            }
+        },
+        components: {
+            JTPDropdown: Dropdown__default["default"]
+        }
+    };
+
+    function render$7(_ctx, _cache, $props, $setup, $data, $options) {
+      const _component_JTPDropdown = vue.resolveComponent("JTPDropdown");
+
+      return (vue.openBlock(), vue.createBlock(_component_JTPDropdown, {
+        modelValue: $props.page,
+        options: $options.pageOptions,
+        optionLabel: "label",
+        optionValue: "value",
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ($options.onChange($event))),
+        class: "p-paginator-page-options",
+        disabled: $props.disabled
+      }, null, 8, ["modelValue", "options", "disabled"]))
+    }
+
+    script$7.render = render$7;
+
+    var script$6 = {
+        name: 'JumpToPageInput',
+        inheritAttrs: false,
+        emits: ['page-change'],
+        props: {
+            page: Number,
+            pageCount: Number,
+            disabled: Boolean
+        },
+        methods: {
+            onChange(value) {
+                this.$emit('page-change', value - 1);
+            }
+        },
+        components: {
+            JTPInput: InputNumber__default["default"]
+        }
+    };
+
+    function render$6(_ctx, _cache, $props, $setup, $data, $options) {
+      const _component_JTPInput = vue.resolveComponent("JTPInput");
+
+      return (vue.openBlock(), vue.createBlock(_component_JTPInput, {
+        modelValue: $props.page,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ($options.onChange($event))),
+        class: "p-paginator-page-input",
+        disabled: $props.disabled
+      }, null, 8, ["modelValue", "disabled"]))
+    }
+
+    script$6.render = render$6;
+
+    var script$5 = {
         name: 'LastPageLink',
         computed: {
             containerClass() {
@@ -6408,7 +6571,7 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
       _hoisted_1$4
     ];
 
-    function render$7(_ctx, _cache, $props, $setup, $data, $options) {
+    function render$5(_ctx, _cache, $props, $setup, $data, $options) {
       const _directive_ripple = vue.resolveDirective("ripple");
 
       return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
@@ -6419,9 +6582,9 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
       ])
     }
 
-    script$7.render = render$7;
+    script$5.render = render$5;
 
-    var script$6 = {
+    var script$4 = {
         name: 'NextPageLink',
         computed: {
             containerClass() {
@@ -6443,7 +6606,7 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
       _hoisted_1$3
     ];
 
-    function render$6(_ctx, _cache, $props, $setup, $data, $options) {
+    function render$4(_ctx, _cache, $props, $setup, $data, $options) {
       const _directive_ripple = vue.resolveDirective("ripple");
 
       return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
@@ -6454,9 +6617,9 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
       ])
     }
 
-    script$6.render = render$6;
+    script$4.render = render$4;
 
-    var script$5 = {
+    var script$3 = {
         name: 'PageLinks',
         inheritAttrs: false,
         emits: ['click'],
@@ -6480,7 +6643,7 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
     const _hoisted_1$2 = { class: "p-paginator-pages" };
     const _hoisted_2$2 = ["onClick"];
 
-    function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+    function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       const _directive_ripple = vue.resolveDirective("ripple");
 
       return (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$2, [
@@ -6499,9 +6662,9 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
       ]))
     }
 
-    script$5.render = render$5;
+    script$3.render = render$3;
 
-    var script$4 = {
+    var script$2 = {
         name: 'PrevPageLink',
         computed: {
             containerClass() {
@@ -6523,7 +6686,7 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
       _hoisted_1$1
     ];
 
-    function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+    function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       const _directive_ripple = vue.resolveDirective("ripple");
 
       return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
@@ -6534,9 +6697,9 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
       ])
     }
 
-    script$4.render = render$4;
+    script$2.render = render$2;
 
-    var script$3 = {
+    var script$1 = {
         name: 'RowsPerPageDropdown',
         inheritAttrs: false,
         emits: ['rows-change'],
@@ -6568,7 +6731,7 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
         }
     };
 
-    function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+    function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_RPPDropdown = vue.resolveComponent("RPPDropdown");
 
       return (vue.openBlock(), vue.createBlock(_component_RPPDropdown, {
@@ -6582,84 +6745,6 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
       }, null, 8, ["modelValue", "options", "disabled"]))
     }
 
-    script$3.render = render$3;
-
-    var script$2 = {
-        name: 'JumpToPageDropdown',
-        inheritAttrs: false,
-        emits: ['page-change'],
-        props: {
-            page: Number,
-            pageCount: Number,
-            disabled: Boolean
-        },
-        methods: {
-            onChange(value) {
-                this.$emit('page-change', value);
-            }
-        },
-        computed: {
-            pageOptions() {
-                let opts = [];
-
-                for (let i = 0; i < this.pageCount; i++) {
-                    opts.push({ label: String(i + 1), value: i });
-                }
-
-                return opts;
-            }
-        },
-        components: {
-            JTPDropdown: Dropdown__default["default"]
-        }
-    };
-
-    function render$2(_ctx, _cache, $props, $setup, $data, $options) {
-      const _component_JTPDropdown = vue.resolveComponent("JTPDropdown");
-
-      return (vue.openBlock(), vue.createBlock(_component_JTPDropdown, {
-        modelValue: $props.page,
-        options: $options.pageOptions,
-        optionLabel: "label",
-        optionValue: "value",
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ($options.onChange($event))),
-        class: "p-paginator-page-options",
-        disabled: $props.disabled
-      }, null, 8, ["modelValue", "options", "disabled"]))
-    }
-
-    script$2.render = render$2;
-
-    var script$1 = {
-        name: 'JumpToPageInput',
-        inheritAttrs: false,
-        emits: ['page-change'],
-        props: {
-            page: Number,
-            pageCount: Number,
-            disabled: Boolean
-        },
-        methods: {
-            onChange(value) {
-                this.$emit('page-change', value - 1);
-            }
-        },
-        components: {
-            JTPInput: InputNumber__default["default"]
-        }
-    };
-
-    function render$1(_ctx, _cache, $props, $setup, $data, $options) {
-      const _component_JTPInput = vue.resolveComponent("JTPInput");
-
-      return (vue.openBlock(), vue.createBlock(_component_JTPInput, {
-        modelValue: $props.page,
-        "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ($options.onChange($event))),
-        class: "p-paginator-page-input",
-        disabled: $props.disabled
-      }, null, 8, ["modelValue", "disabled"]))
-    }
-
     script$1.render = render$1;
 
     var script = {
@@ -6687,7 +6772,7 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
                 default: null
             },
             template: {
-                type: String,
+                type: [Object, String],
                 default: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown'
             },
             currentPageReportTemplate: {
@@ -6718,6 +6803,10 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
                 }
             }
         },
+        mounted() {
+            this.setPaginatorAttribute();
+            this.createStyle();
+        },
         methods: {
             changePage(p) {
                 const pc = this.pageCount;
@@ -6736,6 +6825,7 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
                     this.$emit('page', state);
                 }
             },
+
             changePageToFirst(event) {
                 if (!this.isFirstPage) {
                     this.changePage(0);
@@ -6765,30 +6855,110 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
             onRowChange(value) {
                 this.d_rows = value;
                 this.changePage(this.page);
-            }
-        },
-        computed: {
-            templateItems() {
-                let keys = [];
+            },
+            createStyle() {
+                if (this.hasBreakpoints()) {
+                    this.styleElement = document.createElement('style');
+                    this.styleElement.type = 'text/css';
+                    document.head.appendChild(this.styleElement);
 
-                this.template.split(' ').map((value) => {
-                    keys.push(value.trim());
-                });
+                    let innerHTML = '';
 
-                return keys;
-            },
-            page() {
-                return Math.floor(this.d_first / this.d_rows);
-            },
-            pageCount() {
-                return Math.ceil(this.totalRecords / this.d_rows);
-            },
-            isFirstPage() {
-                return this.page === 0;
-            },
-            isLastPage() {
-                return this.page === this.pageCount - 1;
-            },
+                    const keys = Object.keys(this.template);
+                    const sortedBreakpoints = {};
+
+                    keys.sort((a, b) => parseInt(a) - parseInt(b)).forEach((key) => {
+                        sortedBreakpoints[key] = this.template[key];
+                    });
+
+                    for (const [index, [key]] of Object.entries(Object.entries(sortedBreakpoints))) {
+                        const minValue = Object.entries(sortedBreakpoints)[index - 1] ? `and (min-width:${Object.keys(sortedBreakpoints)[index - 1]})` : '';
+
+                        if (key === 'default') {
+                            innerHTML += `
+                            @media screen ${minValue} {
+                                .paginator[${this.attributeSelector}],
+                                .p-paginator-default{
+                                    display: flex !important;
+                                }
+                            }
+                        `;
+                        } else {
+                            innerHTML += `
+                        .paginator[${this.attributeSelector}], .p-paginator-${key} {
+                                display: none !important;
+                            }
+                        @media screen ${minValue} and (max-width: ${key}) {
+                            .paginator[${this.attributeSelector}], .p-paginator-${key} {
+                                display: flex !important;
+                            }
+                            .paginator[${this.attributeSelector}],
+                            .p-paginator-default{
+                                display: none !important;
+                            }
+                        }
+                    `;
+                        }
+                    }
+
+                    this.styleElement.innerHTML = innerHTML;
+                }
+            },
+            hasBreakpoints() {
+                return typeof this.template === 'object';
+            },
+            getPaginatorClasses(key) {
+                return [
+                    {
+                        'p-paginator-default': !this.hasBreakpoints(),
+                        [`p-paginator-${key}`]: this.hasBreakpoints()
+                    }
+                ];
+            },
+            setPaginatorAttribute() {
+                [...this.$refs.paginator].forEach((el) => {
+                    el.setAttribute(this.attributeSelector, '');
+                });
+            }
+        },
+        computed: {
+            templateItems() {
+                let keys = {};
+
+                if (this.hasBreakpoints()) {
+                    keys = this.template;
+
+                    if (!keys.default) {
+                        keys.default = 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown';
+                    }
+
+                    for (const item in keys) {
+                        keys[item] = this.template[item].split(' ').map((value) => {
+                            return value.trim();
+                        });
+                    }
+
+                    return keys;
+                }
+
+                keys['default'] = this.template.split(' ').map((value) => {
+                    return value.trim();
+                });
+
+                return keys;
+            },
+            page() {
+                return Math.floor(this.d_first / this.d_rows);
+            },
+            pageCount() {
+                return Math.ceil(this.totalRecords / this.d_rows);
+            },
+            isFirstPage() {
+                return this.page === 0;
+            },
+            isLastPage() {
+                return this.page === this.pageCount - 1;
+            },
             calculatePageLinkBoundaries() {
                 const numberOfPages = this.pageCount;
                 const visiblePages = Math.min(this.pageLinkSize, numberOfPages);
@@ -6828,25 +6998,25 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
             },
             currentPage() {
                 return this.pageCount > 0 ? this.page + 1 : 0;
+            },
+            attributeSelector() {
+                return utils.UniqueComponentId();
             }
         },
         components: {
             CurrentPageReport: script$9,
             FirstPageLink: script$8,
-            LastPageLink: script$7,
-            NextPageLink: script$6,
-            PageLinks: script$5,
-            PrevPageLink: script$4,
-            RowsPerPageDropdown: script$3,
-            JumpToPageDropdown: script$2,
-            JumpToPageInput: script$1
+            LastPageLink: script$5,
+            NextPageLink: script$4,
+            PageLinks: script$3,
+            PrevPageLink: script$2,
+            RowsPerPageDropdown: script$1,
+            JumpToPageDropdown: script$7,
+            JumpToPageInput: script$6
         }
     };
 
-    const _hoisted_1 = {
-      key: 0,
-      class: "p-paginator p-component"
-    };
+    const _hoisted_1 = { key: 0 };
     const _hoisted_2 = {
       key: 0,
       class: "p-paginator-left-content"
@@ -6869,86 +7039,95 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
 
       return ($props.alwaysShow ? true : $options.pageLinks && $options.pageLinks.length > 1)
         ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-            (_ctx.$slots.start)
-              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
-                  vue.renderSlot(_ctx.$slots, "start", { state: $options.currentState })
-                ]))
-              : vue.createCommentVNode("", true),
-            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.templateItems, (item) => {
-              return (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: item }, [
-                (item === 'FirstPageLink')
-                  ? (vue.openBlock(), vue.createBlock(_component_FirstPageLink, {
-                      key: 0,
-                      onClick: _cache[0] || (_cache[0] = $event => ($options.changePageToFirst($event))),
-                      disabled: $options.isFirstPage || $options.empty
-                    }, null, 8, ["disabled"]))
-                  : (item === 'PrevPageLink')
-                    ? (vue.openBlock(), vue.createBlock(_component_PrevPageLink, {
-                        key: 1,
-                        onClick: _cache[1] || (_cache[1] = $event => ($options.changePageToPrev($event))),
-                        disabled: $options.isFirstPage || $options.empty
-                      }, null, 8, ["disabled"]))
-                    : (item === 'NextPageLink')
-                      ? (vue.openBlock(), vue.createBlock(_component_NextPageLink, {
-                          key: 2,
-                          onClick: _cache[2] || (_cache[2] = $event => ($options.changePageToNext($event))),
-                          disabled: $options.isLastPage || $options.empty
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.templateItems, (value, key) => {
+              return (vue.openBlock(), vue.createElementBlock("div", {
+                key: key,
+                ref_for: true,
+                ref: "paginator",
+                class: vue.normalizeClass(["p-paginator p-component", $options.getPaginatorClasses(key)])
+              }, [
+                (_ctx.$slots.start)
+                  ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+                      vue.renderSlot(_ctx.$slots, "start", { state: $options.currentState })
+                    ]))
+                  : vue.createCommentVNode("", true),
+                (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(value, (item) => {
+                  return (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: item }, [
+                    (item === 'FirstPageLink')
+                      ? (vue.openBlock(), vue.createBlock(_component_FirstPageLink, {
+                          key: 0,
+                          onClick: _cache[0] || (_cache[0] = $event => ($options.changePageToFirst($event))),
+                          disabled: $options.isFirstPage || $options.empty
                         }, null, 8, ["disabled"]))
-                      : (item === 'LastPageLink')
-                        ? (vue.openBlock(), vue.createBlock(_component_LastPageLink, {
-                            key: 3,
-                            onClick: _cache[3] || (_cache[3] = $event => ($options.changePageToLast($event))),
-                            disabled: $options.isLastPage || $options.empty
+                      : (item === 'PrevPageLink')
+                        ? (vue.openBlock(), vue.createBlock(_component_PrevPageLink, {
+                            key: 1,
+                            onClick: _cache[1] || (_cache[1] = $event => ($options.changePageToPrev($event))),
+                            disabled: $options.isFirstPage || $options.empty
                           }, null, 8, ["disabled"]))
-                        : (item === 'PageLinks')
-                          ? (vue.openBlock(), vue.createBlock(_component_PageLinks, {
-                              key: 4,
-                              value: $options.pageLinks,
-                              page: $options.page,
-                              onClick: _cache[4] || (_cache[4] = $event => ($options.changePageLink($event)))
-                            }, null, 8, ["value", "page"]))
-                          : (item === 'CurrentPageReport')
-                            ? (vue.openBlock(), vue.createBlock(_component_CurrentPageReport, {
-                                key: 5,
-                                template: $props.currentPageReportTemplate,
-                                currentPage: $options.currentPage,
-                                page: $options.page,
-                                pageCount: $options.pageCount,
-                                first: $data.d_first,
-                                rows: $data.d_rows,
-                                totalRecords: $props.totalRecords
-                              }, null, 8, ["template", "currentPage", "page", "pageCount", "first", "rows", "totalRecords"]))
-                            : (item === 'RowsPerPageDropdown' && $props.rowsPerPageOptions)
-                              ? (vue.openBlock(), vue.createBlock(_component_RowsPerPageDropdown, {
-                                  key: 6,
-                                  rows: $data.d_rows,
-                                  options: $props.rowsPerPageOptions,
-                                  onRowsChange: _cache[5] || (_cache[5] = $event => ($options.onRowChange($event))),
-                                  disabled: $options.empty
-                                }, null, 8, ["rows", "options", "disabled"]))
-                              : (item === 'JumpToPageDropdown')
-                                ? (vue.openBlock(), vue.createBlock(_component_JumpToPageDropdown, {
-                                    key: 7,
+                        : (item === 'NextPageLink')
+                          ? (vue.openBlock(), vue.createBlock(_component_NextPageLink, {
+                              key: 2,
+                              onClick: _cache[2] || (_cache[2] = $event => ($options.changePageToNext($event))),
+                              disabled: $options.isLastPage || $options.empty
+                            }, null, 8, ["disabled"]))
+                          : (item === 'LastPageLink')
+                            ? (vue.openBlock(), vue.createBlock(_component_LastPageLink, {
+                                key: 3,
+                                onClick: _cache[3] || (_cache[3] = $event => ($options.changePageToLast($event))),
+                                disabled: $options.isLastPage || $options.empty
+                              }, null, 8, ["disabled"]))
+                            : (item === 'PageLinks')
+                              ? (vue.openBlock(), vue.createBlock(_component_PageLinks, {
+                                  key: 4,
+                                  value: $options.pageLinks,
+                                  page: $options.page,
+                                  onClick: _cache[4] || (_cache[4] = $event => ($options.changePageLink($event)))
+                                }, null, 8, ["value", "page"]))
+                              : (item === 'CurrentPageReport')
+                                ? (vue.openBlock(), vue.createBlock(_component_CurrentPageReport, {
+                                    key: 5,
+                                    template: $props.currentPageReportTemplate,
+                                    currentPage: $options.currentPage,
                                     page: $options.page,
                                     pageCount: $options.pageCount,
-                                    onPageChange: _cache[6] || (_cache[6] = $event => ($options.changePage($event))),
-                                    disabled: $options.empty
-                                  }, null, 8, ["page", "pageCount", "disabled"]))
-                                : (item === 'JumpToPageInput')
-                                  ? (vue.openBlock(), vue.createBlock(_component_JumpToPageInput, {
-                                      key: 8,
-                                      page: $options.currentPage,
-                                      onPageChange: _cache[7] || (_cache[7] = $event => ($options.changePage($event))),
+                                    first: $data.d_first,
+                                    rows: $data.d_rows,
+                                    totalRecords: $props.totalRecords
+                                  }, null, 8, ["template", "currentPage", "page", "pageCount", "first", "rows", "totalRecords"]))
+                                : (item === 'RowsPerPageDropdown' && $props.rowsPerPageOptions)
+                                  ? (vue.openBlock(), vue.createBlock(_component_RowsPerPageDropdown, {
+                                      key: 6,
+                                      rows: $data.d_rows,
+                                      options: $props.rowsPerPageOptions,
+                                      onRowsChange: _cache[5] || (_cache[5] = $event => ($options.onRowChange($event))),
                                       disabled: $options.empty
-                                    }, null, 8, ["page", "disabled"]))
-                                  : vue.createCommentVNode("", true)
-              ], 64))
-            }), 128)),
-            (_ctx.$slots.end)
-              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
-                  vue.renderSlot(_ctx.$slots, "end", { state: $options.currentState })
-                ]))
-              : vue.createCommentVNode("", true)
+                                    }, null, 8, ["rows", "options", "disabled"]))
+                                  : (item === 'JumpToPageDropdown')
+                                    ? (vue.openBlock(), vue.createBlock(_component_JumpToPageDropdown, {
+                                        key: 7,
+                                        page: $options.page,
+                                        pageCount: $options.pageCount,
+                                        onPageChange: _cache[6] || (_cache[6] = $event => ($options.changePage($event))),
+                                        disabled: $options.empty
+                                      }, null, 8, ["page", "pageCount", "disabled"]))
+                                    : (item === 'JumpToPageInput')
+                                      ? (vue.openBlock(), vue.createBlock(_component_JumpToPageInput, {
+                                          key: 8,
+                                          page: $options.currentPage,
+                                          onPageChange: _cache[7] || (_cache[7] = $event => ($options.changePage($event))),
+                                          disabled: $options.empty
+                                        }, null, 8, ["page", "disabled"]))
+                                      : vue.createCommentVNode("", true)
+                  ], 64))
+                }), 128)),
+                (_ctx.$slots.end)
+                  ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+                      vue.renderSlot(_ctx.$slots, "end", { state: $options.currentState })
+                    ]))
+                  : vue.createCommentVNode("", true)
+              ], 2))
+            }), 128))
           ]))
         : vue.createCommentVNode("", true)
     }
@@ -6980,14 +7159,14 @@ this.primevue.paginator = (function (vue, Ripple, Dropdown, InputNumber) {
       }
     }
 
-    var css_248z = "\n.p-paginator {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n}\n.p-paginator-left-content {\n    margin-right: auto;\n}\n.p-paginator-right-content {\n    margin-left: auto;\n}\n.p-paginator-page,\n.p-paginator-next,\n.p-paginator-last,\n.p-paginator-first,\n.p-paginator-prev,\n.p-paginator-current {\n    cursor: pointer;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    line-height: 1;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    overflow: hidden;\n    position: relative;\n}\n.p-paginator-element:focus {\n    z-index: 1;\n    position: relative;\n}\n";
+    var css_248z = "\n.p-paginator-default {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-paginator {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -ms-flex-wrap: wrap;\n        flex-wrap: wrap;\n}\n.p-paginator-left-content {\n    margin-right: auto;\n}\n.p-paginator-right-content {\n    margin-left: auto;\n}\n.p-paginator-page,\n.p-paginator-next,\n.p-paginator-last,\n.p-paginator-first,\n.p-paginator-prev,\n.p-paginator-current {\n    cursor: pointer;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    line-height: 1;\n    -webkit-user-select: none;\n       -moz-user-select: none;\n        -ms-user-select: none;\n            user-select: none;\n    overflow: hidden;\n    position: relative;\n}\n.p-paginator-element:focus {\n    z-index: 1;\n    position: relative;\n}\n";
     styleInject(css_248z);
 
     script.render = render;
 
     return script;
 
-})(Vue, primevue.ripple, primevue.dropdown, primevue.inputnumber);
+})(primevue.utils, Vue, primevue.ripple, primevue.dropdown, primevue.inputnumber);
 
 this.primevue = this.primevue || {};
 this.primevue.tree = (function (utils, Ripple, vue) {
@@ -7728,37 +7907,46 @@ this.primevue.tree = (function (utils, Ripple, vue) {
 })(primevue.utils, primevue.ripple, Vue);
 
 this.primevue = this.primevue || {};
-this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
+this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
     var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
-    var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
     var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
+    var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
     var script$1 = {
         name: 'Menuitem',
         inheritAttrs: false,
-        emits: ['click'],
+        emits: ['item-click'],
         props: {
             item: null,
             template: null,
-            exact: null
+            exact: null,
+            id: null,
+            focusedOptionId: null
         },
         methods: {
-            onClick(event, navigate) {
-                this.$emit('click', {
-                    originalEvent: event,
-                    item: this.item,
-                    navigate: navigate
-                });
+            getItemProp(processedItem, name) {
+                return processedItem && processedItem.item ? utils.ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
+            },
+            onItemActionClick(event, navigate) {
+                navigate && navigate(event);
+            },
+            onItemClick(event) {
+                const command = this.getItemProp(this.item, 'command');
+
+                command && command({ originalEvent: event, item: this.item.item });
+                this.$emit('item-click', { originalEvent: event, item: this.item, id: this.id });
+            },
+            containerClass() {
+                return ['p-menuitem', this.item.class, { 'p-focus': this.id === this.focusedOptionId, 'p-disabled': this.disabled() }];
             },
-            linkClass(item, routerProps) {
+            linkClass(routerProps) {
                 return [
                     'p-menuitem-link',
                     {
-                        'p-disabled': this.disabled(item),
                         'router-link-active': routerProps && routerProps.isActive,
                         'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
                     }
@@ -7767,27 +7955,23 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
             visible() {
                 return typeof this.item.visible === 'function' ? this.item.visible() : this.item.visible !== false;
             },
-            disabled(item) {
-                return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
+            disabled() {
+                return typeof this.item.disabled === 'function' ? this.item.disabled() : this.item.disabled;
             },
             label() {
                 return typeof this.item.label === 'function' ? this.item.label() : this.item.label;
             }
         },
-        computed: {
-            containerClass() {
-                return ['p-menuitem', this.item.class];
-            }
-        },
         directives: {
             ripple: Ripple__default["default"]
         }
     };
 
-    const _hoisted_1$1 = ["href", "onClick"];
-    const _hoisted_2$1 = { class: "p-menuitem-text" };
-    const _hoisted_3 = ["href", "target", "tabindex"];
-    const _hoisted_4 = { class: "p-menuitem-text" };
+    const _hoisted_1$1 = ["id", "aria-label", "aria-disabled"];
+    const _hoisted_2$1 = ["href", "onClick"];
+    const _hoisted_3$1 = { class: "p-menuitem-text" };
+    const _hoisted_4 = ["href", "target"];
+    const _hoisted_5 = { class: "p-menuitem-text" };
 
     function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_router_link = vue.resolveComponent("router-link");
@@ -7796,63 +7980,71 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
       return ($options.visible())
         ? (vue.openBlock(), vue.createElementBlock("li", {
             key: 0,
-            class: vue.normalizeClass($options.containerClass),
-            role: "none",
-            style: vue.normalizeStyle($props.item.style)
+            id: $props.id,
+            class: vue.normalizeClass($options.containerClass()),
+            role: "menuitem",
+            style: vue.normalizeStyle($props.item.style),
+            "aria-label": $options.label(),
+            "aria-disabled": $options.disabled()
           }, [
-            (!$props.template)
-              ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                  ($props.item.to && !$options.disabled($props.item))
-                    ? (vue.openBlock(), vue.createBlock(_component_router_link, {
-                        key: 0,
-                        to: $props.item.to,
-                        custom: ""
-                      }, {
-                        default: vue.withCtx(({ navigate, href, isActive, isExactActive }) => [
-                          vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
-                            href: href,
-                            onClick: $event => ($options.onClick($event, navigate)),
-                            class: vue.normalizeClass($options.linkClass($props.item, { isActive, isExactActive })),
-                            role: "menuitem"
-                          }, [
-                            ($props.item.icon)
-                              ? (vue.openBlock(), vue.createElementBlock("span", {
-                                  key: 0,
-                                  class: vue.normalizeClass(['p-menuitem-icon', $props.item.icon])
-                                }, null, 2))
-                              : vue.createCommentVNode("", true),
-                            vue.createElementVNode("span", _hoisted_2$1, vue.toDisplayString($options.label()), 1)
-                          ], 10, _hoisted_1$1)), [
-                            [_directive_ripple]
-                          ])
-                        ]),
-                        _: 1
-                      }, 8, ["to"]))
-                    : vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
-                        key: 1,
-                        href: $props.item.url,
-                        class: vue.normalizeClass($options.linkClass($props.item)),
-                        onClick: _cache[0] || (_cache[0] = (...args) => ($options.onClick && $options.onClick(...args))),
-                        target: $props.item.target,
-                        role: "menuitem",
-                        tabindex: $options.disabled($props.item) ? null : '0'
-                      }, [
-                        ($props.item.icon)
-                          ? (vue.openBlock(), vue.createElementBlock("span", {
-                              key: 0,
-                              class: vue.normalizeClass(['p-menuitem-icon', $props.item.icon])
-                            }, null, 2))
-                          : vue.createCommentVNode("", true),
-                        vue.createElementVNode("span", _hoisted_4, vue.toDisplayString($options.label()), 1)
-                      ], 10, _hoisted_3)), [
-                        [_directive_ripple]
-                      ])
-                ], 64))
-              : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template), {
-                  key: 1,
-                  item: $props.item
-                }, null, 8, ["item"]))
-          ], 6))
+            vue.createElementVNode("div", {
+              class: "p-menuitem-content",
+              onClick: _cache[0] || (_cache[0] = $event => ($options.onItemClick($event)))
+            }, [
+              (!$props.template)
+                ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                    ($props.item.to && !$options.disabled())
+                      ? (vue.openBlock(), vue.createBlock(_component_router_link, {
+                          key: 0,
+                          to: $props.item.to,
+                          custom: ""
+                        }, {
+                          default: vue.withCtx(({ navigate, href, isActive, isExactActive }) => [
+                            vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
+                              href: href,
+                              class: vue.normalizeClass($options.linkClass({ isActive, isExactActive })),
+                              tabindex: "-1",
+                              "aria-hidden": "true",
+                              onClick: $event => ($options.onItemActionClick($event, navigate))
+                            }, [
+                              ($props.item.icon)
+                                ? (vue.openBlock(), vue.createElementBlock("span", {
+                                    key: 0,
+                                    class: vue.normalizeClass(['p-menuitem-icon', $props.item.icon])
+                                  }, null, 2))
+                                : vue.createCommentVNode("", true),
+                              vue.createElementVNode("span", _hoisted_3$1, vue.toDisplayString($options.label()), 1)
+                            ], 10, _hoisted_2$1)), [
+                              [_directive_ripple]
+                            ])
+                          ]),
+                          _: 1
+                        }, 8, ["to"]))
+                      : vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
+                          key: 1,
+                          href: $props.item.url,
+                          class: vue.normalizeClass($options.linkClass()),
+                          target: $props.item.target,
+                          tabindex: "-1",
+                          "aria-hidden": "true"
+                        }, [
+                          ($props.item.icon)
+                            ? (vue.openBlock(), vue.createElementBlock("span", {
+                                key: 0,
+                                class: vue.normalizeClass(['p-menuitem-icon', $props.item.icon])
+                              }, null, 2))
+                            : vue.createCommentVNode("", true),
+                          vue.createElementVNode("span", _hoisted_5, vue.toDisplayString($options.label()), 1)
+                        ], 10, _hoisted_4)), [
+                          [_directive_ripple]
+                        ])
+                  ], 64))
+                : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template), {
+                    key: 1,
+                    item: $props.item
+                  }, null, 8, ["item"]))
+            ])
+          ], 14, _hoisted_1$1))
         : vue.createCommentVNode("", true)
     }
 
@@ -7861,7 +8053,7 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
     var script = {
         name: 'Menu',
         inheritAttrs: false,
-        emits: ['show', 'hide'],
+        emits: ['show', 'hide', 'focus', 'blur'],
         props: {
             popup: {
                 type: Boolean,
@@ -7886,11 +8078,26 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
             exact: {
                 type: Boolean,
                 default: true
+            },
+            tabindex: {
+                type: Number,
+                default: 0
+            },
+            'aria-label': {
+                type: String,
+                default: null
+            },
+            'aria-labelledby': {
+                type: String,
+                default: null
             }
         },
         data() {
             return {
-                overlayVisible: false
+                overlayVisible: false,
+                focused: false,
+                focusedOptionIndex: -1,
+                selectedOptionIndex: -1
             };
         },
         target: null,
@@ -7898,6 +8105,13 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
         scrollHandler: null,
         resizeListener: null,
         container: null,
+        list: null,
+        mounted() {
+            if (!this.popup) {
+                this.bindResizeListener();
+                this.bindOutsideClickListener();
+            }
+        },
         beforeUnmount() {
             this.unbindResizeListener();
             this.unbindOutsideClickListener();
@@ -7931,7 +8145,115 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
                     event.navigate(event.originalEvent);
                 }
 
-                this.hide();
+                if (this.overlayVisible) this.hide();
+
+                if (!this.popup && this.focusedOptionIndex !== event.id) {
+                    this.focusedOptionIndex = event.id;
+                }
+            },
+            onListFocus(event) {
+                this.focused = true;
+
+                if (!this.popup) {
+                    if (this.selectedOptionIndex !== -1) {
+                        this.changeFocusedOptionIndex(this.selectedOptionIndex);
+                        this.selectedOptionIndex = -1;
+                    } else this.changeFocusedOptionIndex(0);
+                }
+
+                this.$emit('focus', event);
+            },
+            onListBlur(event) {
+                this.focused = false;
+                this.focusedOptionIndex = -1;
+                this.$emit('blur', event);
+            },
+            onListKeyDown(event) {
+                switch (event.code) {
+                    case 'ArrowDown':
+                        this.onArrowDownKey(event);
+                        break;
+
+                    case 'ArrowUp':
+                        this.onArrowUpKey(event);
+                        break;
+
+                    case 'Home':
+                        this.onHomeKey(event);
+                        break;
+
+                    case 'End':
+                        this.onEndKey(event);
+                        break;
+
+                    case 'Enter':
+                        this.onEnterKey(event);
+                        break;
+
+                    case 'Space':
+                        this.onSpaceKey(event);
+                        break;
+
+                    case 'Tab':
+                        this.overlayVisible && this.hide();
+                        break;
+                }
+            },
+            onArrowDownKey(event) {
+                const optionIndex = this.findNextOptionIndex(this.focusedOptionIndex);
+
+                this.changeFocusedOptionIndex(optionIndex);
+                event.preventDefault();
+            },
+            onArrowUpKey(event) {
+                if (event.altKey && this.popup) {
+                    utils.DomHandler.focus(this.target);
+                    this.hide();
+                    event.preventDefault();
+                } else {
+                    const optionIndex = this.findPrevOptionIndex(this.focusedOptionIndex);
+
+                    this.changeFocusedOptionIndex(optionIndex);
+                    event.preventDefault();
+                }
+            },
+            onHomeKey(event) {
+                this.changeFocusedOptionIndex(0);
+                event.preventDefault();
+            },
+            onEndKey(event) {
+                this.changeFocusedOptionIndex(utils.DomHandler.find(this.container, 'li.p-menuitem:not(.p-disabled)').length - 1);
+                event.preventDefault();
+            },
+            onEnterKey(event) {
+                const element = utils.DomHandler.findSingle(this.list, `li[id="${`${this.focusedOptionIndex}`}"]`);
+                const anchorElement = element && utils.DomHandler.findSingle(element, '.p-menuitem-link');
+
+                this.popup && utils.DomHandler.focus(this.target);
+                anchorElement ? anchorElement.click() : element && element.click();
+
+                event.preventDefault();
+            },
+            onSpaceKey(event) {
+                this.onEnterKey(event);
+            },
+            findNextOptionIndex(index) {
+                const links = utils.DomHandler.find(this.container, 'li.p-menuitem:not(.p-disabled)');
+                const matchedOptionIndex = [...links].findIndex((link) => link.id === index);
+
+                return matchedOptionIndex > -1 ? matchedOptionIndex + 1 : 0;
+            },
+            findPrevOptionIndex(index) {
+                const links = utils.DomHandler.find(this.container, 'li.p-menuitem:not(.p-disabled)');
+                const matchedOptionIndex = [...links].findIndex((link) => link.id === index);
+
+                return matchedOptionIndex > -1 ? matchedOptionIndex - 1 : 0;
+            },
+            changeFocusedOptionIndex(index) {
+                const links = utils.DomHandler.find(this.container, 'li.p-menuitem:not(.p-disabled)');
+                let order = index >= links.length ? links.length - 1 : index < 0 ? 0 : index;
+
+                this.focusedOptionIndex = links[order].getAttribute('id');
             },
             toggle(event) {
                 if (this.overlayVisible) this.hide();
@@ -7955,6 +8277,11 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
                     utils.ZIndexUtils.set('menu', el, this.baseZIndex + this.$primevue.config.zIndex.menu);
                 }
 
+                if (this.popup) {
+                    utils.DomHandler.focus(this.list);
+                    this.changeFocusedOptionIndex(0);
+                }
+
                 this.$emit('show');
             },
             onLeave() {
@@ -7975,8 +8302,13 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
             bindOutsideClickListener() {
                 if (!this.outsideClickListener) {
                     this.outsideClickListener = (event) => {
-                        if (this.overlayVisible && this.container && !this.container.contains(event.target) && !this.isTargetClicked(event)) {
+                        const isOutsideContainer = this.container && !this.container.contains(event.target);
+                        const isOutsideTarget = !(this.target && (this.target === event.target || this.target.contains(event.target)));
+
+                        if (this.overlayVisible && isOutsideContainer && isOutsideTarget) {
                             this.hide();
+                        } else if (!this.popup && isOutsideContainer && isOutsideTarget) {
+                            this.focusedOptionIndex = -1;
                         }
                     };
 
@@ -8022,9 +8354,6 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
                     this.resizeListener = null;
                 }
             },
-            isTargetClicked(event) {
-                return this.target && (this.target === event.target || this.target.contains(event.target));
-            },
             visible(item) {
                 return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
             },
@@ -8042,6 +8371,9 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
                     originalEvent: event,
                     target: this.target
                 });
+            },
+            listRef(el) {
+                this.list = el;
             }
         },
         computed: {
@@ -8054,25 +8386,29 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
                         'p-ripple-disabled': this.$primevue.config.ripple === false
                     }
                 ];
+            },
+            separatorClass(item) {
+                return ['p-menu-separator p-menuitem-separator', item.class]; // TODO: the 'p-menu-separator' class is deprecated since v3.18.0.
+            },
+            id() {
+                return this.$attrs.id || utils.UniqueComponentId();
+            },
+            focusedOptionId() {
+                return this.focusedOptionIndex !== -1 ? this.focusedOptionIndex : null;
             }
         },
         components: {
-            Menuitem: script$1,
+            PVMenuitem: script$1,
             Portal: Portal__default["default"]
         }
     };
 
-    const _hoisted_1 = {
-      class: "p-menu-list p-reset",
-      role: "menu"
-    };
-    const _hoisted_2 = {
-      key: 0,
-      class: "p-submenu-header"
-    };
+    const _hoisted_1 = ["id"];
+    const _hoisted_2 = ["id", "tabindex", "aria-activedescendant", "aria-label", "aria-labelledby"];
+    const _hoisted_3 = ["id"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
-      const _component_Menuitem = vue.resolveComponent("Menuitem");
+      const _component_PVMenuitem = vue.resolveComponent("PVMenuitem");
       const _component_Portal = vue.resolveComponent("Portal");
 
       return (vue.openBlock(), vue.createBlock(_component_Portal, {
@@ -8091,11 +8427,24 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
                 ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                     key: 0,
                     ref: $options.containerRef,
+                    id: $options.id,
                     class: $options.containerClass
                   }, _ctx.$attrs, {
-                    onClick: _cache[0] || (_cache[0] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
+                    onClick: _cache[3] || (_cache[3] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
                   }), [
-                    vue.createElementVNode("ul", _hoisted_1, [
+                    vue.createElementVNode("ul", {
+                      ref: $options.listRef,
+                      id: $options.id + '_list',
+                      class: "p-menu-list p-reset",
+                      role: "menu",
+                      tabindex: $props.tabindex,
+                      "aria-activedescendant": $data.focused ? $options.focusedOptionId : undefined,
+                      "aria-label": _ctx.ariaLabel,
+                      "aria-labelledby": _ctx.ariaLabelledby,
+                      onFocus: _cache[0] || (_cache[0] = (...args) => ($options.onListFocus && $options.onListFocus(...args))),
+                      onBlur: _cache[1] || (_cache[1] = (...args) => ($options.onListBlur && $options.onListBlur(...args))),
+                      onKeydown: _cache[2] || (_cache[2] = (...args) => ($options.onListKeyDown && $options.onListKeyDown(...args)))
+                    }, [
                       (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.model, (item, i) => {
                         return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
                           key: $options.label(item) + i.toString()
@@ -8103,28 +8452,35 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
                           (item.items && $options.visible(item) && !item.separator)
                             ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                                 (item.items)
-                                  ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_2, [
+                                  ? (vue.openBlock(), vue.createElementBlock("li", {
+                                      key: 0,
+                                      id: $options.id + '_' + i,
+                                      class: "p-submenu-header",
+                                      role: "none"
+                                    }, [
                                       vue.renderSlot(_ctx.$slots, "item", { item: item }, () => [
                                         vue.createTextVNode(vue.toDisplayString($options.label(item)), 1)
                                       ])
-                                    ]))
+                                    ], 8, _hoisted_3))
                                   : vue.createCommentVNode("", true),
                                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(item.items, (child, j) => {
                                   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
-                                    key: child.label + i + j
+                                    key: child.label + i + '_' + j
                                   }, [
                                     ($options.visible(child) && !child.separator)
-                                      ? (vue.openBlock(), vue.createBlock(_component_Menuitem, {
+                                      ? (vue.openBlock(), vue.createBlock(_component_PVMenuitem, {
                                           key: 0,
+                                          id: $options.id + '_' + i + '_' + j,
                                           item: child,
-                                          onClick: $options.itemClick,
                                           template: _ctx.$slots.item,
-                                          exact: $props.exact
-                                        }, null, 8, ["item", "onClick", "template", "exact"]))
+                                          exact: $props.exact,
+                                          focusedOptionId: $options.focusedOptionId,
+                                          onItemClick: $options.itemClick
+                                        }, null, 8, ["id", "item", "template", "exact", "focusedOptionId", "onItemClick"]))
                                       : ($options.visible(child) && child.separator)
                                         ? (vue.openBlock(), vue.createElementBlock("li", {
                                             key: 'separator' + i + j,
-                                            class: vue.normalizeClass(['p-menu-separator', child.class]),
+                                            class: vue.normalizeClass($options.separatorClass(item)),
                                             style: vue.normalizeStyle(child.style),
                                             role: "separator"
                                           }, null, 6))
@@ -8135,21 +8491,23 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
                             : ($options.visible(item) && item.separator)
                               ? (vue.openBlock(), vue.createElementBlock("li", {
                                   key: 'separator' + i.toString(),
-                                  class: vue.normalizeClass(['p-menu-separator', item.class]),
+                                  class: vue.normalizeClass($options.separatorClass(item)),
                                   style: vue.normalizeStyle(item.style),
                                   role: "separator"
                                 }, null, 6))
-                              : (vue.openBlock(), vue.createBlock(_component_Menuitem, {
+                              : (vue.openBlock(), vue.createBlock(_component_PVMenuitem, {
                                   key: $options.label(item) + i.toString(),
+                                  id: $options.id + '_' + i,
                                   item: item,
-                                  onClick: $options.itemClick,
                                   template: _ctx.$slots.item,
-                                  exact: $props.exact
-                                }, null, 8, ["item", "onClick", "template", "exact"]))
+                                  exact: $props.exact,
+                                  focusedOptionId: $options.focusedOptionId,
+                                  onItemClick: $options.itemClick
+                                }, null, 8, ["id", "item", "template", "exact", "focusedOptionId", "onItemClick"]))
                         ], 64))
                       }), 128))
-                    ])
-                  ], 16))
+                    ], 40, _hoisted_2)
+                  ], 16, _hoisted_1))
                 : vue.createCommentVNode("", true)
             ]),
             _: 3
@@ -8193,10 +8551,10 @@ this.primevue.menu = (function (utils, OverlayEventBus, Ripple, vue, Portal) {
 
     return script;
 
-})(primevue.utils, primevue.overlayeventbus, primevue.ripple, Vue, primevue.portal);
+})(primevue.overlayeventbus, primevue.portal, primevue.utils, primevue.ripple, Vue);
 
 this.primevue = this.primevue || {};
-this.primevue.tieredmenu = (function (utils, OverlayEventBus, Portal, Ripple, vue) {
+this.primevue.tieredmenu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -8207,215 +8565,108 @@ this.primevue.tieredmenu = (function (utils, OverlayEventBus, Portal, Ripple, vu
 
     var script$1 = {
         name: 'TieredMenuSub',
-        emits: ['leaf-click', 'keydown-item'],
+        emits: ['item-click', 'item-mouseenter'],
         props: {
-            model: {
-                type: Array,
+            menuId: {
+                type: String,
                 default: null
             },
-            root: {
-                type: Boolean,
-                default: false
+            focusedItemId: {
+                type: String,
+                default: null
             },
-            popup: {
-                type: Boolean,
-                default: false
+            items: {
+                type: Array,
+                default: null
             },
-            parentActive: {
-                type: Boolean,
-                default: false
+            level: {
+                type: Number,
+                default: 0
             },
             template: {
                 type: Function,
                 default: null
             },
+            activeItemPath: {
+                type: Object,
+                default: null
+            },
             exact: {
                 type: Boolean,
                 default: true
             }
         },
-        documentClickListener: null,
-        data() {
-            return {
-                activeItem: null
-            };
-        },
-        watch: {
-            parentActive(newValue) {
-                if (!newValue) {
-                    this.activeItem = null;
-                }
-            }
-        },
-        updated() {
-            if (this.root && this.activeItem) {
-                this.bindDocumentClickListener();
-            }
-        },
-        beforeUnmount() {
-            this.unbindDocumentClickListener();
-        },
         methods: {
-            onItemMouseEnter(event, item) {
-                if (this.disabled(item)) {
-                    event.preventDefault();
-
-                    return;
-                }
-
-                if (this.root) {
-                    if (this.activeItem || this.popup) {
-                        this.activeItem = item;
-                    }
-                } else {
-                    this.activeItem = item;
-                }
+            getItemId(processedItem) {
+                return `${this.menuId}_${processedItem.key}`;
             },
-            onItemClick(event, item, navigate) {
-                if (this.disabled(item)) {
-                    event.preventDefault();
-
-                    return;
-                }
-
-                if (item.command) {
-                    item.command({
-                        originalEvent: event,
-                        item: item
-                    });
-                }
-
-                if (item.items) {
-                    if (this.activeItem && item === this.activeItem) this.activeItem = null;
-                    else this.activeItem = item;
-                }
-
-                if (!item.items) {
-                    this.onLeafClick();
-                }
-
-                if (item.to && navigate) {
-                    navigate(event);
-                }
+            getItemKey(processedItem) {
+                return this.getItemId(processedItem);
             },
-            onLeafClick() {
-                this.activeItem = null;
-                this.$emit('leaf-click');
+            getItemProp(processedItem, name) {
+                return processedItem && processedItem.item ? utils.ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
             },
-            onItemKeyDown(event, item) {
-                let listItem = event.currentTarget.parentElement;
-
-                switch (event.which) {
-                    //down
-                    case 40:
-                        var nextItem = this.findNextItem(listItem);
-
-                        if (nextItem) {
-                            nextItem.children[0].focus();
-                        }
-
-                        event.preventDefault();
-                        break;
-
-                    //up
-                    case 38:
-                        var prevItem = this.findPrevItem(listItem);
-
-                        if (prevItem) {
-                            prevItem.children[0].focus();
-                        }
-
-                        event.preventDefault();
-                        break;
-
-                    //right
-                    case 39:
-                        if (item.items) {
-                            this.activeItem = item;
-
-                            setTimeout(() => {
-                                listItem.children[1].children[0].children[0].focus();
-                            }, 50);
-                        }
-
-                        event.preventDefault();
-                        break;
-                }
-
-                this.$emit('keydown-item', {
-                    originalEvent: event,
-                    element: listItem
-                });
+            getItemLabel(processedItem) {
+                return this.getItemProp(processedItem, 'label');
             },
-            onChildItemKeyDown(event) {
-                //left
-                if (event.originalEvent.which === 37) {
-                    this.activeItem = null;
-                    event.element.parentElement.previousElementSibling.focus();
-                }
+            isItemActive(processedItem) {
+                return this.activeItemPath.some((path) => path.key === processedItem.key);
             },
-            findNextItem(item) {
-                let nextItem = item.nextElementSibling;
-
-                if (nextItem) return utils.DomHandler.hasClass(nextItem, 'p-disabled') || !utils.DomHandler.hasClass(nextItem, 'p-menuitem') ? this.findNextItem(nextItem) : nextItem;
-                else return null;
+            isItemVisible(processedItem) {
+                return this.getItemProp(processedItem, 'visible') !== false;
+            },
+            isItemDisabled(processedItem) {
+                return this.getItemProp(processedItem, 'disabled');
+            },
+            isItemFocused(processedItem) {
+                return this.focusedItemId === this.getItemId(processedItem);
+            },
+            isItemGroup(processedItem) {
+                return utils.ObjectUtils.isNotEmpty(processedItem.items);
             },
-            findPrevItem(item) {
-                let prevItem = item.previousElementSibling;
+            onItemClick(event, processedItem) {
+                const command = this.getItemProp(processedItem, 'command');
 
-                if (prevItem) return utils.DomHandler.hasClass(prevItem, 'p-disabled') || !utils.DomHandler.hasClass(prevItem, 'p-menuitem') ? this.findPrevItem(prevItem) : prevItem;
-                else return null;
+                command && command({ originalEvent: event, item: processedItem.item });
+                this.$emit('item-click', { originalEvent: event, processedItem, isFocus: true });
             },
-            getItemClass(item) {
+            onItemMouseEnter(event, processedItem) {
+                this.$emit('item-mouseenter', { originalEvent: event, processedItem });
+            },
+            onItemActionClick(event, navigate) {
+                navigate && navigate(event);
+            },
+            getAriaSetSize() {
+                return this.items.filter((processedItem) => this.isItemVisible(processedItem) && !this.getItemProp(processedItem, 'separator')).length;
+            },
+            getAriaPosInset(index) {
+                return index - this.items.slice(0, index).filter((processedItem) => this.isItemVisible(processedItem) && this.getItemProp(processedItem, 'separator')).length + 1;
+            },
+            getItemClass(processedItem) {
                 return [
                     'p-menuitem',
-                    item.class,
+                    this.getItemProp(processedItem, 'class'),
                     {
-                        'p-menuitem-active': this.activeItem === item
+                        'p-menuitem-active p-highlight': this.isItemActive(processedItem),
+                        'p-focus': this.isItemFocused(processedItem),
+                        'p-disabled': this.isItemDisabled(processedItem)
                     }
                 ];
             },
-            linkClass(item, routerProps) {
+            getItemActionClass(processedItem, routerProps) {
                 return [
                     'p-menuitem-link',
                     {
-                        'p-disabled': this.disabled(item),
                         'router-link-active': routerProps && routerProps.isActive,
                         'router-link-active-exact': this.exact && routerProps && routerProps.isExactActive
                     }
                 ];
             },
-            bindDocumentClickListener() {
-                if (!this.documentClickListener) {
-                    this.documentClickListener = (event) => {
-                        if (this.$el && !this.$el.contains(event.target)) {
-                            this.activeItem = null;
-                            this.unbindDocumentClickListener();
-                        }
-                    };
-
-                    document.addEventListener('click', this.documentClickListener);
-                }
-            },
-            unbindDocumentClickListener() {
-                if (this.documentClickListener) {
-                    document.removeEventListener('click', this.documentClickListener);
-                    this.documentClickListener = null;
-                }
+            getItemIconClass(processedItem) {
+                return ['p-menuitem-icon', this.getItemProp(processedItem, 'icon')];
             },
-            visible(item) {
-                return typeof item.visible === 'function' ? item.visible() : item.visible !== false;
-            },
-            disabled(item) {
-                return typeof item.disabled === 'function' ? item.disabled() : item.disabled;
-            },
-            label(item) {
-                return typeof item.label === 'function' ? item.label() : item.label;
-            }
-        },
-        computed: {
-            containerClass() {
-                return { 'p-submenu-list': !this.root };
+            getSeparatorItemClass(processedItem) {
+                return ['p-menuitem-separator', this.getItemProp(processedItem, 'class')];
             }
         },
         directives: {
@@ -8423,122 +8674,135 @@ this.primevue.tieredmenu = (function (utils, OverlayEventBus, Portal, Ripple, vu
         }
     };
 
-    const _hoisted_1 = ["onMouseenter"];
-    const _hoisted_2 = ["href", "onClick", "onKeydown"];
-    const _hoisted_3 = { class: "p-menuitem-text" };
-    const _hoisted_4 = ["href", "target", "aria-haspopup", "aria-expanded", "onClick", "onKeydown", "tabindex"];
-    const _hoisted_5 = { class: "p-menuitem-text" };
-    const _hoisted_6 = {
+    const _hoisted_1$1 = ["id", "aria-label", "aria-disabled", "aria-expanded", "aria-haspopup", "aria-level", "aria-setsize", "aria-posinset"];
+    const _hoisted_2 = ["onClick", "onMouseenter"];
+    const _hoisted_3 = ["href", "onClick"];
+    const _hoisted_4 = { class: "p-menuitem-text" };
+    const _hoisted_5 = ["href", "target"];
+    const _hoisted_6 = { class: "p-menuitem-text" };
+    const _hoisted_7 = {
       key: 1,
       class: "p-submenu-icon pi pi-angle-right"
     };
+    const _hoisted_8 = ["id"];
 
     function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_router_link = vue.resolveComponent("router-link");
       const _component_TieredMenuSub = vue.resolveComponent("TieredMenuSub", true);
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return (vue.openBlock(), vue.createElementBlock("ul", {
-        ref: "element",
-        class: vue.normalizeClass($options.containerClass),
-        role: "'menubar' : 'menu'",
-        "aria-orientation": "horizontal"
-      }, [
-        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.model, (item, i) => {
+      return (vue.openBlock(), vue.createElementBlock("ul", null, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.items, (processedItem, index) => {
           return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
-            key: $options.label(item) + i.toString()
+            key: $options.getItemKey(processedItem)
           }, [
-            ($options.visible(item) && !item.separator)
+            ($options.isItemVisible(processedItem) && !$options.getItemProp(processedItem, 'separator'))
               ? (vue.openBlock(), vue.createElementBlock("li", {
                   key: 0,
-                  class: vue.normalizeClass($options.getItemClass(item)),
-                  style: vue.normalizeStyle(item.style),
-                  onMouseenter: $event => ($options.onItemMouseEnter($event, item)),
-                  role: "none"
+                  id: $options.getItemId(processedItem),
+                  style: vue.normalizeStyle($options.getItemProp(processedItem, 'style')),
+                  class: vue.normalizeClass($options.getItemClass(processedItem)),
+                  role: "menuitem",
+                  "aria-label": $options.getItemLabel(processedItem),
+                  "aria-disabled": $options.isItemDisabled(processedItem) || undefined,
+                  "aria-expanded": $options.isItemGroup(processedItem) ? $options.isItemActive(processedItem) : undefined,
+                  "aria-haspopup": $options.isItemGroup(processedItem) && !$options.getItemProp(processedItem, 'to') ? 'menu' : undefined,
+                  "aria-level": $props.level + 1,
+                  "aria-setsize": $options.getAriaSetSize(),
+                  "aria-posinset": $options.getAriaPosInset(index)
                 }, [
-                  (!$props.template)
-                    ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-                        (item.to && !$options.disabled(item))
-                          ? (vue.openBlock(), vue.createBlock(_component_router_link, {
-                              key: 0,
-                              to: item.to,
-                              custom: ""
-                            }, {
-                              default: vue.withCtx(({ navigate, href, isActive, isExactActive }) => [
-                                vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
-                                  href: href,
-                                  onClick: $event => ($options.onItemClick($event, item, navigate)),
-                                  class: vue.normalizeClass($options.linkClass(item, { isActive, isExactActive })),
-                                  onKeydown: $event => ($options.onItemKeyDown($event, item)),
-                                  role: "menuitem"
-                                }, [
-                                  (item.icon)
-                                    ? (vue.openBlock(), vue.createElementBlock("span", {
-                                        key: 0,
-                                        class: vue.normalizeClass(['p-menuitem-icon', item.icon])
-                                      }, null, 2))
-                                    : vue.createCommentVNode("", true),
-                                  vue.createElementVNode("span", _hoisted_3, vue.toDisplayString($options.label(item)), 1)
-                                ], 42, _hoisted_2)), [
-                                  [_directive_ripple]
-                                ])
-                              ]),
-                              _: 2
-                            }, 1032, ["to"]))
-                          : vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
-                              key: 1,
-                              href: item.url,
-                              class: vue.normalizeClass($options.linkClass(item)),
-                              target: item.target,
-                              "aria-haspopup": item.items != null,
-                              "aria-expanded": item === $data.activeItem,
-                              onClick: $event => ($options.onItemClick($event, item)),
-                              onKeydown: $event => ($options.onItemKeyDown($event, item)),
-                              role: "menuitem",
-                              tabindex: $options.disabled(item) ? null : '0'
-                            }, [
-                              (item.icon)
-                                ? (vue.openBlock(), vue.createElementBlock("span", {
-                                    key: 0,
-                                    class: vue.normalizeClass(['p-menuitem-icon', item.icon])
-                                  }, null, 2))
-                                : vue.createCommentVNode("", true),
-                              vue.createElementVNode("span", _hoisted_5, vue.toDisplayString($options.label(item)), 1),
-                              (item.items)
-                                ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_6))
-                                : vue.createCommentVNode("", true)
-                            ], 42, _hoisted_4)), [
-                              [_directive_ripple]
-                            ])
-                      ], 64))
-                    : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template), {
-                        key: 1,
-                        item: item
-                      }, null, 8, ["item"])),
-                  ($options.visible(item) && item.items)
+                  vue.createElementVNode("div", {
+                    class: "p-menuitem-content",
+                    onClick: $event => ($options.onItemClick($event, processedItem)),
+                    onMouseenter: $event => ($options.onItemMouseEnter($event, processedItem))
+                  }, [
+                    (!$props.template)
+                      ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+                          ($options.getItemProp(processedItem, 'to') && !$options.isItemDisabled(processedItem))
+                            ? (vue.openBlock(), vue.createBlock(_component_router_link, {
+                                key: 0,
+                                to: $options.getItemProp(processedItem, 'to'),
+                                custom: ""
+                              }, {
+                                default: vue.withCtx(({ navigate, href, isActive, isExactActive }) => [
+                                  vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
+                                    href: href,
+                                    class: vue.normalizeClass($options.getItemActionClass(processedItem, { isActive, isExactActive })),
+                                    tabindex: "-1",
+                                    "aria-hidden": "true",
+                                    onClick: $event => ($options.onItemActionClick($event, navigate))
+                                  }, [
+                                    ($options.getItemProp(processedItem, 'icon'))
+                                      ? (vue.openBlock(), vue.createElementBlock("span", {
+                                          key: 0,
+                                          class: vue.normalizeClass($options.getItemIconClass(processedItem))
+                                        }, null, 2))
+                                      : vue.createCommentVNode("", true),
+                                    vue.createElementVNode("span", _hoisted_4, vue.toDisplayString($options.getItemLabel(processedItem)), 1)
+                                  ], 10, _hoisted_3)), [
+                                    [_directive_ripple]
+                                  ])
+                                ]),
+                                _: 2
+                              }, 1032, ["to"]))
+                            : vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
+                                key: 1,
+                                href: $options.getItemProp(processedItem, 'url'),
+                                class: vue.normalizeClass($options.getItemActionClass(processedItem)),
+                                target: $options.getItemProp(processedItem, 'target'),
+                                tabindex: "-1",
+                                "aria-hidden": "true"
+                              }, [
+                                ($options.getItemProp(processedItem, 'icon'))
+                                  ? (vue.openBlock(), vue.createElementBlock("span", {
+                                      key: 0,
+                                      class: vue.normalizeClass($options.getItemIconClass(processedItem))
+                                    }, null, 2))
+                                  : vue.createCommentVNode("", true),
+                                vue.createElementVNode("span", _hoisted_6, vue.toDisplayString($options.getItemLabel(processedItem)), 1),
+                                ($options.isItemGroup(processedItem))
+                                  ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7))
+                                  : vue.createCommentVNode("", true)
+                              ], 10, _hoisted_5)), [
+                                [_directive_ripple]
+                              ])
+                        ], 64))
+                      : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template), {
+                          key: 1,
+                          item: processedItem.item
+                        }, null, 8, ["item"]))
+                  ], 40, _hoisted_2),
+                  ($options.isItemVisible(processedItem) && $options.isItemGroup(processedItem))
                     ? (vue.openBlock(), vue.createBlock(_component_TieredMenuSub, {
-                        key: $options.label(item) + '_sub_',
-                        model: item.items,
+                        key: 0,
+                        id: $options.getItemId(processedItem) + '_list',
+                        role: "menu",
+                        class: "p-submenu-list",
+                        menuId: $props.menuId,
+                        focusedItemId: $props.focusedItemId,
+                        items: processedItem.items,
                         template: $props.template,
-                        onLeafClick: $options.onLeafClick,
-                        onKeydownItem: $options.onChildItemKeyDown,
-                        parentActive: item === $data.activeItem,
-                        exact: $props.exact
-                      }, null, 8, ["model", "template", "onLeafClick", "onKeydownItem", "parentActive", "exact"]))
+                        activeItemPath: $props.activeItemPath,
+                        exact: $props.exact,
+                        level: $props.level + 1,
+                        onItemClick: _cache[0] || (_cache[0] = $event => (_ctx.$emit('item-click', $event))),
+                        onItemMouseenter: _cache[1] || (_cache[1] = $event => (_ctx.$emit('item-mouseenter', $event)))
+                      }, null, 8, ["id", "menuId", "focusedItemId", "items", "template", "activeItemPath", "exact", "level"]))
                     : vue.createCommentVNode("", true)
-                ], 46, _hoisted_1))
+                ], 14, _hoisted_1$1))
               : vue.createCommentVNode("", true),
-            ($options.visible(item) && item.separator)
+            ($options.isItemVisible(processedItem) && $options.getItemProp(processedItem, 'separator'))
               ? (vue.openBlock(), vue.createElementBlock("li", {
-                  key: 'separator' + i.toString(),
-                  class: vue.normalizeClass(['p-menu-separator', item.class]),
-                  style: vue.normalizeStyle(item.style),
+                  key: 1,
+                  id: $options.getItemId(processedItem),
+                  style: vue.normalizeStyle($options.getItemProp(processedItem, 'style')),
+                  class: vue.normalizeClass($options.getSeparatorItemClass(processedItem)),
                   role: "separator"
-                }, null, 6))
+                }, null, 14, _hoisted_8))
               : vue.createCommentVNode("", true)
           ], 64))
         }), 128))
-      ], 2))
+      ]))
     }
 
     script$1.render = render$1;
@@ -8546,6 +8810,7 @@ this.primevue.tieredmenu = (function (utils, OverlayEventBus, Portal, Ripple, vu
     var script = {
         name: 'TieredMenu',
         inheritAttrs: false,
+        emits: ['focus', 'blur', 'before-show', 'before-hide', 'hide', 'show'],
         props: {
             popup: {
                 type: Boolean,
@@ -8570,71 +8835,365 @@ this.primevue.tieredmenu = (function (utils, OverlayEventBus, Portal, Ripple, vu
             exact: {
                 type: Boolean,
                 default: true
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            tabindex: {
+                type: Number,
+                default: 0
+            },
+            'aria-labelledby': {
+                type: String,
+                default: null
+            },
+            'aria-label': {
+                type: String,
+                default: null
             }
         },
-        target: null,
-        container: null,
         outsideClickListener: null,
         scrollHandler: null,
         resizeListener: null,
+        target: null,
+        container: null,
+        menubar: null,
+        searchTimeout: null,
+        searchValue: null,
         data() {
             return {
-                visible: false
+                focused: false,
+                focusedItemInfo: { index: -1, level: 0, parentKey: '' },
+                activeItemPath: [],
+                visible: !this.popup,
+                dirty: false
             };
         },
+        watch: {
+            activeItemPath(newPath) {
+                if (!this.popup) {
+                    if (utils.ObjectUtils.isNotEmpty(newPath)) {
+                        this.bindOutsideClickListener();
+                        this.bindResizeListener();
+                    } else {
+                        this.unbindOutsideClickListener();
+                        this.unbindResizeListener();
+                    }
+                }
+            }
+        },
         beforeUnmount() {
-            this.unbindResizeListener();
             this.unbindOutsideClickListener();
+            this.unbindResizeListener();
 
             if (this.scrollHandler) {
                 this.scrollHandler.destroy();
                 this.scrollHandler = null;
             }
 
-            this.target = null;
-
             if (this.container && this.autoZIndex) {
                 utils.ZIndexUtils.clear(this.container);
             }
 
+            this.target = null;
             this.container = null;
         },
         methods: {
-            itemClick(event) {
-                const item = event.item;
+            getItemProp(item, name) {
+                return item ? utils.ObjectUtils.getItemValue(item[name]) : undefined;
+            },
+            getItemLabel(item) {
+                return this.getItemProp(item, 'label');
+            },
+            isItemDisabled(item) {
+                return this.getItemProp(item, 'disabled');
+            },
+            isItemGroup(item) {
+                return utils.ObjectUtils.isNotEmpty(this.getItemProp(item, 'items'));
+            },
+            isItemSeparator(item) {
+                return this.getItemProp(item, 'separator');
+            },
+            getProccessedItemLabel(processedItem) {
+                return processedItem ? this.getItemLabel(processedItem.item) : undefined;
+            },
+            isProccessedItemGroup(processedItem) {
+                return processedItem && utils.ObjectUtils.isNotEmpty(processedItem.items);
+            },
+            toggle(event) {
+                this.visible ? this.hide(event) : this.show(event);
+            },
+            show(event, isFocus) {
+                if (this.popup) {
+                    this.$emit('before-show');
+                    this.visible = true;
+                    this.target = this.target || event.currentTarget;
+                }
 
-                if (item.command) {
-                    item.command(event);
-                    event.originalEvent.preventDefault();
+                this.focusedItemInfo = { index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '' };
+
+                isFocus && utils.DomHandler.focus(this.menubar);
+            },
+            hide(event, isFocus) {
+                if (this.popup) {
+                    this.$emit('before-hide');
+                    this.visible = false;
                 }
 
-                this.hide();
+                this.activeItemPath = [];
+                this.focusedItemInfo = { index: -1, level: 0, parentKey: '' };
+
+                isFocus && utils.DomHandler.focus(this.target || this.menubar);
+                this.dirty = false;
             },
-            toggle(event) {
-                if (this.visible) this.hide();
-                else this.show(event);
+            onFocus(event) {
+                this.focused = true;
+                this.focusedItemInfo = this.focusedItemInfo.index !== -1 ? this.focusedItemInfo : { index: this.findFirstFocusedItemIndex(), level: 0, parentKey: '' };
+
+                this.$emit('focus', event);
             },
-            show(event) {
-                this.visible = true;
-                this.target = event.currentTarget;
+            onBlur(event) {
+                this.focused = false;
+                this.focusedItemInfo = { index: -1, level: 0, parentKey: '' };
+                this.searchValue = '';
+                this.dirty = false;
+                this.$emit('blur', event);
             },
-            hide() {
-                this.visible = false;
+            onKeyDown(event) {
+                if (this.disabled) {
+                    event.preventDefault();
+
+                    return;
+                }
+
+                const metaKey = event.metaKey || event.ctrlKey;
+
+                switch (event.code) {
+                    case 'ArrowDown':
+                        this.onArrowDownKey(event);
+                        break;
+
+                    case 'ArrowUp':
+                        this.onArrowUpKey(event);
+                        break;
+
+                    case 'ArrowLeft':
+                        this.onArrowLeftKey(event);
+                        break;
+
+                    case 'ArrowRight':
+                        this.onArrowRightKey(event);
+                        break;
+
+                    case 'Home':
+                        this.onHomeKey(event);
+                        break;
+
+                    case 'End':
+                        this.onEndKey(event);
+                        break;
+
+                    case 'Space':
+                        this.onSpaceKey(event);
+                        break;
+
+                    case 'Enter':
+                        this.onEnterKey(event);
+                        break;
+
+                    case 'Escape':
+                        this.onEscapeKey(event);
+                        break;
+
+                    case 'Tab':
+                        this.onTabKey(event);
+                        break;
+
+                    case 'PageDown':
+                    case 'PageUp':
+                    case 'Backspace':
+                    case 'ShiftLeft':
+                    case 'ShiftRight':
+                        //NOOP
+                        break;
+
+                    default:
+                        if (!metaKey && utils.ObjectUtils.isPrintableCharacter(event.key)) {
+                            this.searchItems(event, event.key);
+                        }
+
+                        break;
+                }
+            },
+            onItemChange(event) {
+                const { processedItem, isFocus } = event;
+
+                if (utils.ObjectUtils.isEmpty(processedItem)) return;
+
+                const { index, key, level, parentKey, items } = processedItem;
+                const grouped = utils.ObjectUtils.isNotEmpty(items);
+
+                const activeItemPath = this.activeItemPath.filter((p) => p.parentKey !== parentKey && p.parentKey !== key);
+
+                grouped && activeItemPath.push(processedItem);
+
+                this.focusedItemInfo = { index, level, parentKey };
+                this.activeItemPath = activeItemPath;
+
+                grouped && (this.dirty = true);
+                isFocus && utils.DomHandler.focus(this.menubar);
+            },
+            onOverlayClick(event) {
+                OverlayEventBus__default["default"].emit('overlay-click', {
+                    originalEvent: event,
+                    target: this.target
+                });
+            },
+            onItemClick(event) {
+                const { originalEvent, processedItem } = event;
+                const grouped = this.isProccessedItemGroup(processedItem);
+                const root = utils.ObjectUtils.isEmpty(processedItem.parent);
+                const selected = this.isSelected(processedItem);
+
+                if (selected) {
+                    const { index, key, level, parentKey } = processedItem;
+
+                    this.activeItemPath = this.activeItemPath.filter((p) => key !== p.key && key.startsWith(p.key));
+                    this.focusedItemInfo = { index, level, parentKey };
+
+                    this.dirty = !root;
+                    utils.DomHandler.focus(this.menubar);
+                } else {
+                    grouped ? this.onItemChange(event) : this.hide(originalEvent, !root);
+                }
+            },
+            onItemMouseEnter(event) {
+                if (this.dirty) {
+                    this.onItemChange(event);
+                }
+            },
+            onArrowDownKey(event) {
+                const itemIndex = this.focusedItemInfo.index !== -1 ? this.findNextItemIndex(this.focusedItemInfo.index) : this.findFirstFocusedItemIndex();
+
+                this.changeFocusedItemIndex(event, itemIndex);
+                event.preventDefault();
+            },
+            onArrowUpKey(event) {
+                if (event.altKey) {
+                    if (this.focusedItemInfo.index !== -1) {
+                        const processedItem = this.visibleItems[this.focusedItemInfo.index];
+                        const grouped = this.isProccessedItemGroup(processedItem);
+
+                        !grouped && this.onItemChange({ originalEvent: event, processedItem });
+                    }
+
+                    this.popup && this.hide(event, true);
+                    event.preventDefault();
+                } else {
+                    const itemIndex = this.focusedItemInfo.index !== -1 ? this.findPrevItemIndex(this.focusedItemInfo.index) : this.findLastFocusedItemIndex();
+
+                    this.changeFocusedItemIndex(event, itemIndex);
+                    event.preventDefault();
+                }
+            },
+            onArrowLeftKey(event) {
+                const processedItem = this.visibleItems[this.focusedItemInfo.index];
+                const parentItem = this.activeItemPath.find((p) => p.key === processedItem.parentKey);
+                const root = utils.ObjectUtils.isEmpty(processedItem.parent);
+
+                if (!root) {
+                    this.focusedItemInfo = { index: -1, parentKey: parentItem ? parentItem.parentKey : '' };
+                    this.searchValue = '';
+                    this.onArrowDownKey(event);
+                }
+
+                this.activeItemPath = this.activeItemPath.filter((p) => p.parentKey !== this.focusedItemInfo.parentKey);
+
+                event.preventDefault();
+            },
+            onArrowRightKey(event) {
+                const processedItem = this.visibleItems[this.focusedItemInfo.index];
+                const grouped = this.isProccessedItemGroup(processedItem);
+
+                if (grouped) {
+                    this.onItemChange({ originalEvent: event, processedItem });
+                    this.focusedItemInfo = { index: -1, parentKey: processedItem.key };
+                    this.searchValue = '';
+                    this.onArrowDownKey(event);
+                }
+
+                event.preventDefault();
+            },
+            onHomeKey(event) {
+                this.changeFocusedItemIndex(event, this.findFirstItemIndex());
+                event.preventDefault();
+            },
+            onEndKey(event) {
+                this.changeFocusedItemIndex(event, this.findLastItemIndex());
+                event.preventDefault();
+            },
+            onEnterKey(event) {
+                if (this.focusedItemInfo.index !== -1) {
+                    const element = utils.DomHandler.findSingle(this.menubar, `li[id="${`${this.focusedItemId}`}"]`);
+                    const anchorElement = element && utils.DomHandler.findSingle(element, '.p-menuitem-link');
+
+                    anchorElement ? anchorElement.click() : element && element.click();
+
+                    if (!this.popup) {
+                        const processedItem = this.visibleItems[this.focusedItemInfo.index];
+                        const grouped = this.isProccessedItemGroup(processedItem);
+
+                        !grouped && (this.focusedItemInfo.index = this.findFirstFocusedItemIndex());
+                    }
+                }
+
+                event.preventDefault();
+            },
+            onSpaceKey(event) {
+                this.onEnterKey(event);
+            },
+            onEscapeKey(event) {
+                this.hide(event, true);
+                !this.popup && (this.focusedItemInfo.index = this.findFirstFocusedItemIndex());
+
+                event.preventDefault();
+            },
+            onTabKey(event) {
+                if (this.focusedItemInfo.index !== -1) {
+                    const processedItem = this.visibleItems[this.focusedItemInfo.index];
+                    const grouped = this.isProccessedItemGroup(processedItem);
+
+                    !grouped && this.onItemChange({ originalEvent: event, processedItem });
+                }
+
+                this.hide();
             },
             onEnter(el) {
+                if (this.autoZIndex) {
+                    utils.ZIndexUtils.set('menu', el, this.baseZIndex + this.$primevue.config.zIndex.menu);
+                }
+
+                utils.DomHandler.focus(this.menubar);
+
                 this.alignOverlay();
+                this.scrollInView();
+            },
+            onAfterEnter() {
                 this.bindOutsideClickListener();
-                this.bindResizeListener();
                 this.bindScrollListener();
+                this.bindResizeListener();
 
-                if (this.autoZIndex) {
-                    utils.ZIndexUtils.set('menu', el, this.baseZIndex + this.$primevue.config.zIndex.menu);
-                }
+                this.$emit('show');
             },
             onLeave() {
                 this.unbindOutsideClickListener();
-                this.unbindResizeListener();
                 this.unbindScrollListener();
+                this.unbindResizeListener();
+
+                this.$emit('hide');
+                this.container = null;
+                this.dirty = false;
             },
             onAfterLeave(el) {
                 if (this.autoZIndex) {
@@ -8642,13 +9201,16 @@ this.primevue.tieredmenu = (function (utils, OverlayEventBus, Portal, Ripple, vu
                 }
             },
             alignOverlay() {
-                utils.DomHandler.absolutePosition(this.container, this.target);
                 this.container.style.minWidth = utils.DomHandler.getOuterWidth(this.target) + 'px';
+                utils.DomHandler.absolutePosition(this.container, this.target);
             },
             bindOutsideClickListener() {
                 if (!this.outsideClickListener) {
                     this.outsideClickListener = (event) => {
-                        if (this.visible && this.container && !this.container.contains(event.target) && !this.isTargetClicked(event)) {
+                        const isOutsideContainer = this.container && !this.container.contains(event.target);
+                        const isOutsideTarget = this.popup ? !(this.target && (this.target === event.target || this.target.contains(event.target))) : true;
+
+                        if (isOutsideContainer && isOutsideTarget) {
                             this.hide();
                         }
                     };
@@ -8664,10 +9226,8 @@ this.primevue.tieredmenu = (function (utils, OverlayEventBus, Portal, Ripple, vu
             },
             bindScrollListener() {
                 if (!this.scrollHandler) {
-                    this.scrollHandler = new utils.ConnectedOverlayScrollHandler(this.target, () => {
-                        if (this.visible) {
-                            this.hide();
-                        }
+                    this.scrollHandler = new utils.ConnectedOverlayScrollHandler(this.target, (event) => {
+                        this.hide(event, true);
                     });
                 }
 
@@ -8680,9 +9240,9 @@ this.primevue.tieredmenu = (function (utils, OverlayEventBus, Portal, Ripple, vu
             },
             bindResizeListener() {
                 if (!this.resizeListener) {
-                    this.resizeListener = () => {
-                        if (this.visible && !utils.DomHandler.isTouchDevice()) {
-                            this.hide();
+                    this.resizeListener = (event) => {
+                        if (!utils.DomHandler.isTouchDevice()) {
+                            this.hide(event, true);
                         }
                     };
 
@@ -8695,22 +9255,123 @@ this.primevue.tieredmenu = (function (utils, OverlayEventBus, Portal, Ripple, vu
                     this.resizeListener = null;
                 }
             },
-            isTargetClicked(event) {
-                return this.target && (this.target === event.target || this.target.contains(event.target));
+            isItemMatched(processedItem) {
+                return this.isValidItem(processedItem) && this.getProccessedItemLabel(processedItem).toLocaleLowerCase().startsWith(this.searchValue.toLocaleLowerCase());
             },
-            onLeafClick() {
-                if (this.popup) {
-                    this.hide();
+            isValidItem(processedItem) {
+                return !!processedItem && !this.isItemDisabled(processedItem.item) && !this.isItemSeparator(processedItem.item);
+            },
+            isValidSelectedItem(processedItem) {
+                return this.isValidItem(processedItem) && this.isSelected(processedItem);
+            },
+            isSelected(processedItem) {
+                return this.activeItemPath.some((p) => p.key === processedItem.key);
+            },
+            findFirstItemIndex() {
+                return this.visibleItems.findIndex((processedItem) => this.isValidItem(processedItem));
+            },
+            findLastItemIndex() {
+                return utils.ObjectUtils.findLastIndex(this.visibleItems, (processedItem) => this.isValidItem(processedItem));
+            },
+            findNextItemIndex(index) {
+                const matchedItemIndex = index < this.visibleItems.length - 1 ? this.visibleItems.slice(index + 1).findIndex((processedItem) => this.isValidItem(processedItem)) : -1;
+
+                return matchedItemIndex > -1 ? matchedItemIndex + index + 1 : index;
+            },
+            findPrevItemIndex(index) {
+                const matchedItemIndex = index > 0 ? utils.ObjectUtils.findLastIndex(this.visibleItems.slice(0, index), (processedItem) => this.isValidItem(processedItem)) : -1;
+
+                return matchedItemIndex > -1 ? matchedItemIndex : index;
+            },
+            findSelectedItemIndex() {
+                return this.visibleItems.findIndex((processedItem) => this.isValidSelectedItem(processedItem));
+            },
+            findFirstFocusedItemIndex() {
+                const selectedIndex = this.findSelectedItemIndex();
+
+                return selectedIndex < 0 ? this.findFirstItemIndex() : selectedIndex;
+            },
+            findLastFocusedItemIndex() {
+                const selectedIndex = this.findSelectedItemIndex();
+
+                return selectedIndex < 0 ? this.findLastItemIndex() : selectedIndex;
+            },
+            searchItems(event, char) {
+                this.searchValue = (this.searchValue || '') + char;
+
+                let itemIndex = -1;
+                let matched = false;
+
+                if (this.focusedItemInfo.index !== -1) {
+                    itemIndex = this.visibleItems.slice(this.focusedItemInfo.index).findIndex((processedItem) => this.isItemMatched(processedItem));
+                    itemIndex = itemIndex === -1 ? this.visibleItems.slice(0, this.focusedItemInfo.index).findIndex((processedItem) => this.isItemMatched(processedItem)) : itemIndex + this.focusedItemInfo.index;
+                } else {
+                    itemIndex = this.visibleItems.findIndex((processedItem) => this.isItemMatched(processedItem));
                 }
+
+                if (itemIndex !== -1) {
+                    matched = true;
+                }
+
+                if (itemIndex === -1 && this.focusedItemInfo.index === -1) {
+                    itemIndex = this.findFirstFocusedItemIndex();
+                }
+
+                if (itemIndex !== -1) {
+                    this.changeFocusedItemIndex(event, itemIndex);
+                }
+
+                if (this.searchTimeout) {
+                    clearTimeout(this.searchTimeout);
+                }
+
+                this.searchTimeout = setTimeout(() => {
+                    this.searchValue = '';
+                    this.searchTimeout = null;
+                }, 500);
+
+                return matched;
+            },
+            changeFocusedItemIndex(event, index) {
+                if (this.focusedItemInfo.index !== index) {
+                    this.focusedItemInfo.index = index;
+                    this.scrollInView();
+                }
+            },
+            scrollInView(index = -1) {
+                const id = index !== -1 ? `${this.id}_${index}` : this.focusedItemId;
+                const element = utils.DomHandler.findSingle(this.menubar, `li[id="${id}"]`);
+
+                if (element) {
+                    element.scrollIntoView && element.scrollIntoView({ block: 'nearest', inline: 'start' });
+                }
+            },
+            createProcessedItems(items, level = 0, parent = {}, parentKey = '') {
+                const processedItems = [];
+
+                items &&
+                    items.forEach((item, index) => {
+                        const key = (parentKey !== '' ? parentKey + '_' : '') + index;
+                        const newItem = {
+                            item,
+                            index,
+                            level,
+                            key,
+                            parent,
+                            parentKey
+                        };
+
+                        newItem['items'] = this.createProcessedItems(item.items, level + 1, newItem, key);
+                        processedItems.push(newItem);
+                    });
+
+                return processedItems;
             },
             containerRef(el) {
                 this.container = el;
             },
-            onOverlayClick(event) {
-                OverlayEventBus__default["default"].emit('overlay-click', {
-                    originalEvent: event,
-                    target: this.target
-                });
+            menubarRef(el) {
+                this.menubar = el ? el.$el : undefined;
             }
         },
         computed: {
@@ -8723,6 +9384,20 @@ this.primevue.tieredmenu = (function (utils, OverlayEventBus, Portal, Ripple, vu
                         'p-ripple-disabled': this.$primevue.config.ripple === false
                     }
                 ];
+            },
+            processedItems() {
+                return this.createProcessedItems(this.model || []);
+            },
+            visibleItems() {
+                const processedItem = this.activeItemPath.find((p) => p.key === this.focusedItemInfo.parentKey);
+
+                return processedItem ? processedItem.items : this.processedItems;
+            },
+            id() {
+                return this.$attrs.id || utils.UniqueComponentId();
+            },
+            focusedItemId() {
+                return this.focusedItemInfo.index !== -1 ? `${this.id}${utils.ObjectUtils.isNotEmpty(this.focusedItemInfo.parentKey) ? '_' + this.focusedItemInfo.parentKey : ''}_${this.focusedItemInfo.index}` : null;
             }
         },
         components: {
@@ -8731,6 +9406,8 @@ this.primevue.tieredmenu = (function (utils, OverlayEventBus, Portal, Ripple, vu
         }
     };
 
+    const _hoisted_1 = ["id"];
+
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_TieredMenuSub = vue.resolveComponent("TieredMenuSub");
       const _component_Portal = vue.resolveComponent("Portal");
@@ -8743,31 +9420,48 @@ this.primevue.tieredmenu = (function (utils, OverlayEventBus, Portal, Ripple, vu
           vue.createVNode(vue.Transition, {
             name: "p-connected-overlay",
             onEnter: $options.onEnter,
+            onAfterEnter: $options.onAfterEnter,
             onLeave: $options.onLeave,
             onAfterLeave: $options.onAfterLeave
           }, {
             default: vue.withCtx(() => [
-              ($props.popup ? $data.visible : true)
+              ($data.visible)
                 ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                     key: 0,
                     ref: $options.containerRef,
-                    class: $options.containerClass
-                  }, _ctx.$attrs, {
+                    id: $options.id,
+                    class: $options.containerClass,
                     onClick: _cache[0] || (_cache[0] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
-                  }), [
+                  }, _ctx.$attrs), [
                     vue.createVNode(_component_TieredMenuSub, {
-                      model: $props.model,
-                      root: true,
-                      popup: $props.popup,
-                      onLeafClick: $options.onLeafClick,
+                      ref: $options.menubarRef,
+                      id: $options.id + '_list',
+                      class: "p-tieredmenu-root-list",
+                      tabindex: !$props.disabled ? $props.tabindex : -1,
+                      role: "menubar",
+                      "aria-label": _ctx.ariaLabel,
+                      "aria-labelledby": _ctx.ariaLabelledby,
+                      "aria-disabled": $props.disabled || undefined,
+                      "aria-orientation": "vertical",
+                      "aria-activedescendant": $data.focused ? $options.focusedItemId : undefined,
+                      menuId: $options.id,
+                      focusedItemId: $data.focused ? $options.focusedItemId : undefined,
+                      items: $options.processedItems,
                       template: _ctx.$slots.item,
-                      exact: $props.exact
-                    }, null, 8, ["model", "popup", "onLeafClick", "template", "exact"])
-                  ], 16))
+                      activeItemPath: $data.activeItemPath,
+                      exact: $props.exact,
+                      level: 0,
+                      onFocus: $options.onFocus,
+                      onBlur: $options.onBlur,
+                      onKeydown: $options.onKeyDown,
+                      onItemClick: $options.onItemClick,
+                      onItemMouseenter: $options.onItemMouseEnter
+                    }, null, 8, ["id", "tabindex", "aria-label", "aria-labelledby", "aria-disabled", "aria-activedescendant", "menuId", "focusedItemId", "items", "template", "activeItemPath", "exact", "onFocus", "onBlur", "onKeydown", "onItemClick", "onItemMouseenter"])
+                  ], 16, _hoisted_1))
                 : vue.createCommentVNode("", true)
             ]),
             _: 1
-          }, 8, ["onEnter", "onLeave", "onAfterLeave"])
+          }, 8, ["onEnter", "onAfterEnter", "onLeave", "onAfterLeave"])
         ]),
         _: 1
       }, 8, ["appendTo", "disabled"]))
@@ -8807,5 +9501,5 @@ this.primevue.tieredmenu = (function (utils, OverlayEventBus, Portal, Ripple, vu
 
     return script;
 
-})(primevue.utils, primevue.overlayeventbus, primevue.portal, primevue.ripple, Vue);
+})(primevue.overlayeventbus, primevue.portal, primevue.utils, primevue.ripple, Vue);