primevue 3.27.0 → 3.28.0

package/core/core.js

@@ -1705,7 +1705,8 @@ this.primevue.config = (function (exports, api, vue) {
             overlay: 1000,
             menu: 1000,
             tooltip: 1100
-        }
+        },
+        pt: undefined
     };
 
     const PrimeVueSymbol = Symbol();
@@ -1752,6 +1753,7 @@ this.primevue.config = (function (exports, api, vue) {
     };
 
     exports["default"] = PrimeVue;
+    exports.defaultOptions = defaultOptions;
     exports.usePrimeVue = usePrimeVue;
 
     Object.defineProperty(exports, '__esModule', { value: true });
@@ -1920,7 +1922,7 @@ this.primevue.basecomponent = (function (utils) {
         props: {
             pt: {
                 type: Object,
-                value: {}
+                default: undefined
             }
         },
         methods: {
@@ -1929,11 +1931,18 @@ this.primevue.basecomponent = (function (utils) {
 
                 return obj[Object.keys(obj).find((k) => utils.ObjectUtils.convertToFlatCase(k) === fKey) || ''];
             },
+            getPTValue(obj = {}, key = '', params = {}) {
+                const self = utils.ObjectUtils.getItemValue(this.getPTItem(obj, key), params);
+                const globalComponentPT = this.getPTItem(this.$primevue.config.pt, this.$.type.name);
+                const global = utils.ObjectUtils.getItemValue(this.getPTItem(globalComponentPT, key), params);
+
+                return { ...global, ...self };
+            },
             ptm(key = '', params = {}) {
-                return utils.ObjectUtils.getItemValue(this.getPTItem(this.pt, key), { props: this.$props, state: this.$data, ...params });
+                return this.getPTValue(this.pt, key, { props: this.$props, state: this.$data, ...params });
             },
             ptmo(obj = {}, key = '', params = {}) {
-                return utils.ObjectUtils.getItemValue(this.getPTItem(obj, key), params);
+                return this.getPTValue(obj, key, params);
             }
         }
     };
@@ -1951,11 +1960,11 @@ this.primevue.baseicon = (function (utils) {
         props: {
             label: {
                 type: String,
-                value: undefined
+                default: undefined
             },
             spin: {
                 type: Boolean,
-                value: false
+                default: false
             }
         },
         methods: {
@@ -5497,16 +5506,18 @@ this.primevue.usedialog = (function (exports, vue) {
 })({}, Vue);
 
 this.primevue = this.primevue || {};
-this.primevue.button = (function (SpinnerIcon, Ripple, vue) {
+this.primevue.button = (function (BaseComponent, SpinnerIcon, Ripple, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var SpinnerIcon__default = /*#__PURE__*/_interopDefaultLegacy(SpinnerIcon);
     var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
     var script = {
         name: 'Button',
+        extends: BaseComponent__default["default"],
         props: {
             label: {
                 type: String,
@@ -5638,58 +5649,54 @@ this.primevue.button = (function (SpinnerIcon, Ripple, vue) {
     };
 
     const _hoisted_1 = ["aria-label", "disabled"];
-    const _hoisted_2 = { class: "p-button-label" };
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_SpinnerIcon = vue.resolveComponent("SpinnerIcon");
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
-        class: vue.normalizeClass($options.buttonClass),
+      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
+        class: $options.buttonClass,
         type: "button",
         "aria-label": $options.defaultAriaLabel,
         disabled: $options.disabled
-      }, [
-        vue.renderSlot(_ctx.$slots, "default"),
-        (!_ctx.$slots.default)
-          ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
-              ($props.loading)
-                ? vue.renderSlot(_ctx.$slots, "loadingicon", {
-                    key: 0,
-                    class: vue.normalizeClass($options.loadingIconStyleClass)
-                  }, () => [
-                    ($props.loadingIcon)
-                      ? (vue.openBlock(), vue.createElementBlock("span", {
-                          key: 0,
-                          class: vue.normalizeClass([$options.loadingIconStyleClass, $props.loadingIcon])
-                        }, null, 2))
-                      : (vue.openBlock(), vue.createBlock(_component_SpinnerIcon, {
-                          key: 1,
-                          class: vue.normalizeClass($options.loadingIconStyleClass),
-                          spin: ""
-                        }, null, 8, ["class"]))
-                  ])
-                : vue.renderSlot(_ctx.$slots, "icon", {
-                    key: 1,
-                    class: vue.normalizeClass($options.iconStyleClass)
-                  }, () => [
-                    ($props.icon)
-                      ? (vue.openBlock(), vue.createElementBlock("span", {
-                          key: 0,
-                          class: vue.normalizeClass([$options.iconStyleClass, $props.icon])
-                        }, null, 2))
-                      : vue.createCommentVNode("", true)
-                  ]),
-              vue.createElementVNode("span", _hoisted_2, vue.toDisplayString($props.label || ' '), 1),
-              ($props.badge)
-                ? (vue.openBlock(), vue.createElementBlock("span", {
-                    key: 2,
-                    class: vue.normalizeClass($options.badgeStyleClass)
-                  }, vue.toDisplayString($props.badge), 3))
-                : vue.createCommentVNode("", true)
-            ], 64))
-          : vue.createCommentVNode("", true)
-      ], 10, _hoisted_1)), [
+      }, _ctx.ptm('root')), [
+        vue.renderSlot(_ctx.$slots, "default", {}, () => [
+          ($props.loading)
+            ? vue.renderSlot(_ctx.$slots, "loadingicon", {
+                key: 0,
+                class: vue.normalizeClass($options.loadingIconStyleClass)
+              }, () => [
+                ($props.loadingIcon)
+                  ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                      key: 0,
+                      class: [$options.loadingIconStyleClass, $props.loadingIcon]
+                    }, _ctx.ptm('loadingIcon')), null, 16))
+                  : (vue.openBlock(), vue.createBlock(_component_SpinnerIcon, vue.mergeProps({
+                      key: 1,
+                      class: $options.loadingIconStyleClass,
+                      spin: ""
+                    }, _ctx.ptm('loadingIcon')), null, 16, ["class"]))
+              ])
+            : vue.renderSlot(_ctx.$slots, "icon", {
+                key: 1,
+                class: vue.normalizeClass($options.iconStyleClass)
+              }, () => [
+                ($props.icon)
+                  ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                      key: 0,
+                      class: [$options.iconStyleClass, $props.icon]
+                    }, _ctx.ptm('icon')), null, 16))
+                  : vue.createCommentVNode("", true)
+              ]),
+          vue.createElementVNode("span", vue.mergeProps({ class: "p-button-label" }, _ctx.ptm('label')), vue.toDisplayString($props.label || ' '), 17),
+          ($props.badge)
+            ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                key: 2,
+                class: $options.badgeStyleClass
+              }, _ctx.ptm('badge')), vue.toDisplayString($props.badge), 17))
+            : vue.createCommentVNode("", true)
+        ])
+      ], 16, _hoisted_1)), [
         [_directive_ripple]
       ])
     }
@@ -5698,7 +5705,7 @@ this.primevue.button = (function (SpinnerIcon, Ripple, vue) {
 
     return script;
 
-})(primevue.icons.spinner, primevue.ripple, Vue);
+})(primevue.basecomponent, primevue.icons.spinner, primevue.ripple, Vue);
 
 this.primevue = this.primevue || {};
 this.primevue.inputtext = (function (vue) {
@@ -6955,11 +6962,12 @@ this.primevue.inputnumber = (function (Button, AngleDownIcon, AngleUpIcon, Input
 })(primevue.button, primevue.icons.angledown, primevue.icons.angleup, primevue.inputtext, primevue.utils, Vue);
 
 this.primevue = this.primevue || {};
-this.primevue.message = (function (CheckIcon, ExclamationTriangleIcon, InfoCircleIcon, TimesIcon, TimesCircleIcon, Ripple, vue) {
+this.primevue.message = (function (BaseComponent, CheckIcon, ExclamationTriangleIcon, InfoCircleIcon, TimesIcon, TimesCircleIcon, Ripple, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var CheckIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckIcon);
     var ExclamationTriangleIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExclamationTriangleIcon);
     var InfoCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(InfoCircleIcon);
@@ -6969,6 +6977,7 @@ this.primevue.message = (function (CheckIcon, ExclamationTriangleIcon, InfoCircl
 
     var script = {
         name: 'Message',
+        extends: BaseComponent__default["default"],
         emits: ['close'],
         props: {
             severity: {
@@ -7050,9 +7059,7 @@ this.primevue.message = (function (CheckIcon, ExclamationTriangleIcon, InfoCircl
         }
     };
 
-    const _hoisted_1 = { class: "p-message-wrapper" };
-    const _hoisted_2 = { class: "p-message-text" };
-    const _hoisted_3 = ["aria-label"];
+    const _hoisted_1 = ["aria-label"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_TimesIcon = vue.resolveComponent("TimesIcon");
@@ -7063,21 +7070,21 @@ this.primevue.message = (function (CheckIcon, ExclamationTriangleIcon, InfoCircl
         appear: ""
       }, {
         default: vue.withCtx(() => [
-          vue.withDirectives(vue.createElementVNode("div", {
-            class: vue.normalizeClass($options.containerClass),
+          vue.withDirectives(vue.createElementVNode("div", vue.mergeProps({
+            class: $options.containerClass,
             role: "alert",
             "aria-live": "assertive",
             "aria-atomic": "true"
-          }, [
-            vue.createElementVNode("div", _hoisted_1, [
+          }, _ctx.ptm('root')), [
+            vue.createElementVNode("div", vue.mergeProps({ class: "p-message-wrapper" }, _ctx.ptm('wrapper')), [
               vue.renderSlot(_ctx.$slots, "messageicon", { class: "p-message-icon" }, () => [
-                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.icon ? 'span' : $options.iconComponent), {
-                  class: vue.normalizeClass(['p-message-icon', $props.icon])
-                }, null, 8, ["class"]))
+                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.icon ? 'span' : $options.iconComponent), vue.mergeProps({
+                  class: ['p-message-icon', $props.icon]
+                }, _ctx.ptm('icon')), null, 16, ["class"]))
               ]),
-              vue.createElementVNode("div", _hoisted_2, [
+              vue.createElementVNode("div", vue.mergeProps({ class: "p-message-text" }, _ctx.ptm('text')), [
                 vue.renderSlot(_ctx.$slots, "default")
-              ]),
+              ], 16),
               ($props.closable)
                 ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                     key: 0,
@@ -7085,24 +7092,24 @@ this.primevue.message = (function (CheckIcon, ExclamationTriangleIcon, InfoCircl
                     "aria-label": $options.closeAriaLabel,
                     type: "button",
                     onClick: _cache[0] || (_cache[0] = $event => ($options.close($event)))
-                  }, $props.closeButtonProps), [
+                  }, { ...$props.closeButtonProps, ..._ctx.ptm('button') }), [
                     vue.renderSlot(_ctx.$slots, "closeicon", { class: "p-message-close-icon" }, () => [
                       ($props.closeIcon)
-                        ? (vue.openBlock(), vue.createElementBlock("i", {
+                        ? (vue.openBlock(), vue.createElementBlock("i", vue.mergeProps({
                             key: 0,
-                            class: vue.normalizeClass(['p-message-close-icon', $props.closeIcon])
-                          }, null, 2))
-                        : (vue.openBlock(), vue.createBlock(_component_TimesIcon, {
+                            class: ['p-message-close-icon', $props.closeIcon]
+                          }, _ctx.ptm('buttonIcon')), null, 16))
+                        : (vue.openBlock(), vue.createBlock(_component_TimesIcon, vue.mergeProps({
                             key: 1,
                             class: "p-message-close-icon"
-                          }))
+                          }, _ctx.ptm('buttonIcon')), null, 16))
                     ])
-                  ], 16, _hoisted_3)), [
+                  ], 16, _hoisted_1)), [
                     [_directive_ripple]
                   ])
                 : vue.createCommentVNode("", true)
-            ])
-          ], 2), [
+            ], 16)
+          ], 16), [
             [vue.vShow, $data.visible]
           ])
         ]),
@@ -7144,14 +7151,19 @@ this.primevue.message = (function (CheckIcon, ExclamationTriangleIcon, InfoCircl
 
     return script;
 
-})(primevue.icons.check, primevue.icons.exclamationtriangle, primevue.icons.infocircle, primevue.icons.times, primevue.icons.timescircle, primevue.ripple, Vue);
+})(primevue.basecomponent, primevue.icons.check, primevue.icons.exclamationtriangle, primevue.icons.infocircle, primevue.icons.times, primevue.icons.timescircle, primevue.ripple, Vue);
 
 this.primevue = this.primevue || {};
-this.primevue.progressbar = (function (vue) {
+this.primevue.progressbar = (function (BaseComponent, vue) {
     'use strict';
 
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+
     var script = {
         name: 'ProgressBar',
+        extends: BaseComponent__default["default"],
         props: {
             value: {
                 type: Number,
@@ -7192,46 +7204,42 @@ this.primevue.progressbar = (function (vue) {
     };
 
     const _hoisted_1 = ["aria-valuenow"];
-    const _hoisted_2 = {
-      key: 0,
-      class: "p-progressbar-label"
-    };
-    const _hoisted_3 = {
-      key: 1,
-      class: "p-progressbar-indeterminate-container"
-    };
-    const _hoisted_4 = /*#__PURE__*/vue.createElementVNode("div", { class: "p-progressbar-value p-progressbar-value-animate" }, null, -1);
-    const _hoisted_5 = [
-      _hoisted_4
-    ];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
-      return (vue.openBlock(), vue.createElementBlock("div", {
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         role: "progressbar",
-        class: vue.normalizeClass($options.containerClass),
+        class: $options.containerClass,
         "aria-valuemin": "0",
         "aria-valuenow": $props.value,
         "aria-valuemax": "100"
-      }, [
+      }, _ctx.ptm('root')), [
         ($options.determinate)
-          ? (vue.openBlock(), vue.createElementBlock("div", {
+          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
               key: 0,
               class: "p-progressbar-value p-progressbar-value-animate",
-              style: vue.normalizeStyle($options.progressStyle)
-            }, [
+              style: $options.progressStyle
+            }, _ctx.ptm('value')), [
               ($props.value != null && $props.value !== 0 && $props.showValue)
-                ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+                ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                    key: 0,
+                    class: "p-progressbar-label"
+                  }, _ctx.ptm('label')), [
                     vue.renderSlot(_ctx.$slots, "default", {}, () => [
                       vue.createTextVNode(vue.toDisplayString($props.value + '%'), 1)
                     ])
-                  ]))
+                  ], 16))
                 : vue.createCommentVNode("", true)
-            ], 4))
+            ], 16))
           : vue.createCommentVNode("", true),
         ($options.indeterminate)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, _hoisted_5))
+          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+              key: 1,
+              class: "p-progressbar-indeterminate-container"
+            }, _ctx.ptm('root')), [
+              vue.createElementVNode("div", vue.mergeProps({ class: "p-progressbar-value p-progressbar-value-animate" }, _ctx.ptm('value')), null, 16)
+            ], 16))
           : vue.createCommentVNode("", true)
-      ], 10, _hoisted_1))
+      ], 16, _hoisted_1))
     }
 
     function styleInject(css, ref) {
@@ -7268,7 +7276,7 @@ this.primevue.progressbar = (function (vue) {
 
     return script;
 
-})(Vue);
+})(primevue.basecomponent, Vue);
 
 this.primevue = this.primevue || {};
 this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIcon, TimesIcon, OverlayEventBus, Portal, Ripple, utils, VirtualScroller, vue) {
@@ -8074,7 +8082,7 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
                         'p-disabled': this.disabled,
                         'p-dropdown-clearable': this.showClear && !this.disabled,
                         'p-focus': this.focused,
-                        'p-inputwrapper-filled': this.modelValue,
+                        'p-inputwrapper-filled': this.hasSelectedOption,
                         'p-inputwrapper-focus': this.focused || this.overlayVisible,
                         'p-overlay-open': this.overlayVisible
                     }
@@ -8543,11 +8551,12 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
 })(primevue.api, primevue.icons.chevrondown, primevue.icons.filter, primevue.icons.spinner, primevue.icons.times, primevue.overlayeventbus, primevue.portal, primevue.ripple, primevue.utils, primevue.virtualscroller, Vue);
 
 this.primevue = this.primevue || {};
-this.primevue.dialog = (function (FocusTrap, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon, Portal, Ripple, utils, vue) {
+this.primevue.dialog = (function (BaseComponent, FocusTrap, TimesIcon, WindowMaximizeIcon, WindowMinimizeIcon, Portal, Ripple, utils, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
     var TimesIcon__default = /*#__PURE__*/_interopDefaultLegacy(TimesIcon);
     var WindowMaximizeIcon__default = /*#__PURE__*/_interopDefaultLegacy(WindowMaximizeIcon);
@@ -8557,6 +8566,7 @@ this.primevue.dialog = (function (FocusTrap, TimesIcon, WindowMaximizeIcon, Wind
 
     var script = {
         name: 'Dialog',
+        extends: BaseComponent__default["default"],
         inheritAttrs: false,
         emits: ['update:visible', 'show', 'hide', 'after-hide', 'maximize', 'unmaximize', 'dragend'],
         props: {
@@ -9023,9 +9033,8 @@ this.primevue.dialog = (function (FocusTrap, TimesIcon, WindowMaximizeIcon, Wind
 
     const _hoisted_1 = ["aria-labelledby", "aria-modal"];
     const _hoisted_2 = ["id"];
-    const _hoisted_3 = { class: "p-dialog-header-icons" };
-    const _hoisted_4 = ["autofocus", "tabindex"];
-    const _hoisted_5 = ["autofocus", "aria-label"];
+    const _hoisted_3 = ["autofocus", "tabindex"];
+    const _hoisted_4 = ["autofocus", "aria-label", "pt"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_Portal = vue.resolveComponent("Portal");
@@ -9035,12 +9044,12 @@ this.primevue.dialog = (function (FocusTrap, TimesIcon, WindowMaximizeIcon, Wind
       return (vue.openBlock(), vue.createBlock(_component_Portal, { appendTo: $props.appendTo }, {
         default: vue.withCtx(() => [
           ($data.containerVisible)
-            ? (vue.openBlock(), vue.createElementBlock("div", {
+            ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                 key: 0,
                 ref: $options.maskRef,
-                class: vue.normalizeClass($options.maskClass),
+                class: $options.maskClass,
                 onClick: _cache[3] || (_cache[3] = (...args) => ($options.onMaskClick && $options.onMaskClick(...args)))
-              }, [
+              }, _ctx.ptm('mask')), [
                 vue.createVNode(vue.Transition, {
                   name: "p-dialog",
                   onBeforeEnter: $options.onBeforeEnter,
@@ -9059,26 +9068,26 @@ this.primevue.dialog = (function (FocusTrap, TimesIcon, WindowMaximizeIcon, Wind
                           role: "dialog",
                           "aria-labelledby": $options.ariaLabelledById,
                           "aria-modal": $props.modal
-                        }, _ctx.$attrs), [
+                        }, { ..._ctx.$attrs, ..._ctx.ptm('root') }), [
                           ($props.showHeader)
-                            ? (vue.openBlock(), vue.createElementBlock("div", {
+                            ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                                 key: 0,
                                 ref: $options.headerContainerRef,
                                 class: "p-dialog-header",
                                 onMousedown: _cache[2] || (_cache[2] = (...args) => ($options.initDrag && $options.initDrag(...args)))
-                              }, [
+                              }, _ctx.ptm('header')), [
                                 vue.renderSlot(_ctx.$slots, "header", {}, () => [
                                   ($props.header)
-                                    ? (vue.openBlock(), vue.createElementBlock("span", {
+                                    ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                                         key: 0,
                                         id: $options.ariaLabelledById,
                                         class: "p-dialog-title"
-                                      }, vue.toDisplayString($props.header), 9, _hoisted_2))
+                                      }, _ctx.ptm('headerTitle')), vue.toDisplayString($props.header), 17, _hoisted_2))
                                     : vue.createCommentVNode("", true)
                                 ]),
-                                vue.createElementVNode("div", _hoisted_3, [
+                                vue.createElementVNode("div", vue.mergeProps({ class: "p-dialog-header-icons" }, _ctx.ptm('headerIcons')), [
                                   ($props.maximizable)
-                                    ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+                                    ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
                                         key: 0,
                                         ref: $options.maximizableRef,
                                         autofocus: $data.focusableMax,
@@ -9086,13 +9095,11 @@ this.primevue.dialog = (function (FocusTrap, TimesIcon, WindowMaximizeIcon, Wind
                                         onClick: _cache[0] || (_cache[0] = (...args) => ($options.maximize && $options.maximize(...args))),
                                         type: "button",
                                         tabindex: $props.maximizable ? '0' : '-1'
-                                      }, [
+                                      }, _ctx.ptm('maximizableButton')), [
                                         vue.renderSlot(_ctx.$slots, "maximizeicon", { maximized: $data.maximized }, () => [
-                                          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.maximizeIconComponent), {
-                                            class: vue.normalizeClass($options.maximizeIconClass)
-                                          }, null, 8, ["class"]))
+                                          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.maximizeIconComponent), vue.mergeProps({ class: $options.maximizeIconClass }, _ctx.ptm('maximizableIcon')), null, 16, ["class"]))
                                         ])
-                                      ], 8, _hoisted_4)), [
+                                      ], 16, _hoisted_3)), [
                                         [_directive_ripple]
                                       ])
                                     : vue.createCommentVNode("", true),
@@ -9104,37 +9111,38 @@ this.primevue.dialog = (function (FocusTrap, TimesIcon, WindowMaximizeIcon, Wind
                                         class: "p-dialog-header-icon p-dialog-header-close p-link",
                                         onClick: _cache[1] || (_cache[1] = (...args) => ($options.close && $options.close(...args))),
                                         "aria-label": $options.closeAriaLabel,
-                                        type: "button"
+                                        type: "button",
+                                        pt: _ctx.ptm('closeButton')
                                       }, $props.closeButtonProps), [
                                         vue.renderSlot(_ctx.$slots, "closeicon", {}, () => [
-                                          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), {
-                                            class: vue.normalizeClass(['p-dialog-header-close-icon', $props.closeIcon])
-                                          }, null, 8, ["class"]))
+                                          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.closeIcon ? 'span' : 'TimesIcon'), vue.mergeProps({
+                                            class: ['p-dialog-header-close-icon', $props.closeIcon]
+                                          }, _ctx.ptm('closeButton')['icon']), null, 16, ["class"]))
                                         ])
-                                      ], 16, _hoisted_5)), [
+                                      ], 16, _hoisted_4)), [
                                         [_directive_ripple]
                                       ])
                                     : vue.createCommentVNode("", true)
-                                ])
-                              ], 544))
+                                ], 16)
+                              ], 16))
                             : vue.createCommentVNode("", true),
                           vue.createElementVNode("div", vue.mergeProps({
                             ref: $options.contentRef,
                             class: $options.contentStyleClass,
                             style: $props.contentStyle
-                          }, $props.contentProps), [
+                          }, { ...$props.contentProps, ..._ctx.ptm('content') }), [
                             vue.renderSlot(_ctx.$slots, "default")
                           ], 16),
                           ($props.footer || _ctx.$slots.footer)
-                            ? (vue.openBlock(), vue.createElementBlock("div", {
+                            ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                                 key: 1,
                                 ref: $options.footerContainerRef,
                                 class: "p-dialog-footer"
-                              }, [
+                              }, _ctx.ptm('footer')), [
                                 vue.renderSlot(_ctx.$slots, "footer", {}, () => [
                                   vue.createTextVNode(vue.toDisplayString($props.footer), 1)
                                 ])
-                              ], 512))
+                              ], 16))
                             : vue.createCommentVNode("", true)
                         ], 16, _hoisted_1)), [
                           [_directive_focustrap, { disabled: !$props.modal }]
@@ -9143,7 +9151,7 @@ this.primevue.dialog = (function (FocusTrap, TimesIcon, WindowMaximizeIcon, Wind
                   ]),
                   _: 3
                 }, 8, ["onBeforeEnter", "onEnter", "onBeforeLeave", "onLeave", "onAfterLeave"])
-              ], 2))
+              ], 16))
             : vue.createCommentVNode("", true)
         ]),
         _: 3
@@ -9184,7 +9192,7 @@ this.primevue.dialog = (function (FocusTrap, TimesIcon, WindowMaximizeIcon, Wind
 
     return script;
 
-})(primevue.focustrap, primevue.icons.times, primevue.icons.windowmaximize, primevue.icons.windowminimize, primevue.portal, primevue.ripple, primevue.utils, Vue);
+})(primevue.basecomponent, primevue.focustrap, primevue.icons.times, primevue.icons.windowmaximize, primevue.icons.windowminimize, primevue.portal, primevue.ripple, primevue.utils, Vue);
 
 this.primevue = this.primevue || {};
 this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dropdown, InputNumber, AngleDoubleRightIcon, AngleRightIcon, AngleLeftIcon) {
@@ -10967,17 +10975,19 @@ this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, CheckIcon, Chevr
 })(primevue.icons.search, primevue.icons.spinner, primevue.utils, primevue.icons.check, primevue.icons.chevrondown, primevue.icons.chevronright, primevue.icons.minus, primevue.ripple, Vue);
 
 this.primevue = this.primevue || {};
-this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
+this.primevue.menu = (function (BaseComponent, OverlayEventBus, Portal, utils, Ripple, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
     var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
     var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
     var script$1 = {
         name: 'Menuitem',
+        extends: BaseComponent__default["default"],
         inheritAttrs: false,
         emits: ['item-click'],
         props: {
@@ -10991,6 +11001,16 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
             getItemProp(processedItem, name) {
                 return processedItem && processedItem.item ? utils.ObjectUtils.getItemValue(processedItem.item[name]) : undefined;
             },
+            getPTOptions(key) {
+                return this.ptm(key, {
+                    context: {
+                        focused: this.isItemFocused()
+                    }
+                });
+            },
+            isItemFocused() {
+                return this.focusedOptionId === this.id;
+            },
             onItemActionClick(event, navigate) {
                 navigate && navigate(event);
             },
@@ -11034,28 +11054,26 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
 
     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$1 = ["href", "target"];
-    const _hoisted_5$1 = { class: "p-menuitem-text" };
+    const _hoisted_3$1 = ["href", "target"];
 
     function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_router_link = vue.resolveComponent("router-link");
       const _directive_ripple = vue.resolveDirective("ripple");
 
       return ($options.visible())
-        ? (vue.openBlock(), vue.createElementBlock("li", {
+        ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
             key: 0,
             id: $props.id,
-            class: vue.normalizeClass($options.containerClass()),
+            class: $options.containerClass(),
             role: "menuitem",
-            style: vue.normalizeStyle($props.item.style),
+            style: $props.item.style,
             "aria-label": $options.label(),
             "aria-disabled": $options.disabled()
-          }, [
-            vue.createElementVNode("div", {
+          }, $options.getPTOptions('menuitem')), [
+            vue.createElementVNode("div", vue.mergeProps({
               class: "p-menuitem-content",
               onClick: _cache[0] || (_cache[0] = $event => ($options.onItemClick($event)))
-            }, [
+            }, $options.getPTOptions('content')), [
               (!$props.templates.item)
                 ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                     ($props.item.to && !$options.disabled())
@@ -11065,13 +11083,13 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
                           custom: ""
                         }, {
                           default: vue.withCtx(({ navigate, href, isActive, isExactActive }) => [
-                            vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
+                            vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({
                               href: href,
-                              class: vue.normalizeClass($options.linkClass({ isActive, isExactActive })),
+                              class: $options.linkClass({ isActive, isExactActive }),
                               tabindex: "-1",
                               "aria-hidden": "true",
                               onClick: $event => ($options.onItemActionClick($event, navigate))
-                            }, [
+                            }, $options.getPTOptions('action')), [
                               ($props.templates.itemicon)
                                 ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.itemicon), {
                                     key: 0,
@@ -11079,26 +11097,26 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
                                     class: vue.normalizeClass($options.iconClass)
                                   }, null, 8, ["item", "class"]))
                                 : ($props.item.icon)
-                                  ? (vue.openBlock(), vue.createElementBlock("span", {
+                                  ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                                       key: 1,
-                                      class: vue.normalizeClass($options.iconClass)
-                                    }, null, 2))
+                                      class: $options.iconClass
+                                    }, $options.getPTOptions('icon')), null, 16))
                                   : vue.createCommentVNode("", true),
-                              vue.createElementVNode("span", _hoisted_3$1, vue.toDisplayString($options.label()), 1)
-                            ], 10, _hoisted_2$1)), [
+                              vue.createElementVNode("span", vue.mergeProps({ class: "p-menuitem-text" }, $options.getPTOptions('label')), vue.toDisplayString($options.label()), 17)
+                            ], 16, _hoisted_2$1)), [
                               [_directive_ripple]
                             ])
                           ]),
                           _: 1
                         }, 8, ["to"]))
-                      : vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
+                      : vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({
                           key: 1,
                           href: $props.item.url,
-                          class: vue.normalizeClass($options.linkClass()),
+                          class: $options.linkClass(),
                           target: $props.item.target,
                           tabindex: "-1",
                           "aria-hidden": "true"
-                        }, [
+                        }, $options.getPTOptions('action')), [
                           ($props.templates.itemicon)
                             ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.itemicon), {
                                 key: 0,
@@ -11106,13 +11124,13 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
                                 class: vue.normalizeClass($options.iconClass)
                               }, null, 8, ["item", "class"]))
                             : ($props.item.icon)
-                              ? (vue.openBlock(), vue.createElementBlock("span", {
+                              ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                                   key: 1,
-                                  class: vue.normalizeClass($options.iconClass)
-                                }, null, 2))
+                                  class: $options.iconClass
+                                }, $options.getPTOptions('icon')), null, 16))
                               : vue.createCommentVNode("", true),
-                          vue.createElementVNode("span", _hoisted_5$1, vue.toDisplayString($options.label()), 1)
-                        ], 10, _hoisted_4$1)), [
+                          vue.createElementVNode("span", vue.mergeProps({ class: "p-menuitem-text" }, $options.getPTOptions('label')), vue.toDisplayString($options.label()), 17)
+                        ], 16, _hoisted_3$1)), [
                           [_directive_ripple]
                         ])
                   ], 64))
@@ -11120,8 +11138,8 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
                     key: 1,
                     item: $props.item
                   }, null, 8, ["item"]))
-            ])
-          ], 14, _hoisted_1$1))
+            ], 16)
+          ], 16, _hoisted_1$1))
         : vue.createCommentVNode("", true)
     }
 
@@ -11129,6 +11147,7 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
 
     var script = {
         name: 'Menu',
+        extends: BaseComponent__default["default"],
         inheritAttrs: false,
         emits: ['show', 'hide', 'focus', 'blur'],
         props: {
@@ -11492,16 +11511,8 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
     };
 
     const _hoisted_1 = ["id"];
-    const _hoisted_2 = {
-      key: 0,
-      class: "p-menu-start"
-    };
-    const _hoisted_3 = ["id", "tabindex", "aria-activedescendant", "aria-label", "aria-labelledby"];
-    const _hoisted_4 = ["id"];
-    const _hoisted_5 = {
-      key: 1,
-      class: "p-menu-end"
-    };
+    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_PVMenuitem = vue.resolveComponent("PVMenuitem");
@@ -11524,16 +11535,18 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
                     key: 0,
                     ref: $options.containerRef,
                     id: $data.id,
-                    class: $options.containerClass
-                  }, _ctx.$attrs, {
+                    class: $options.containerClass,
                     onClick: _cache[3] || (_cache[3] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
-                  }), [
+                  }, { ..._ctx.$attrs, ..._ctx.ptm('root') }), [
                     (_ctx.$slots.start)
-                      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+                      ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                          key: 0,
+                          class: "p-menu-start"
+                        }, _ctx.ptm('start')), [
                           vue.renderSlot(_ctx.$slots, "start")
-                        ]))
+                        ], 16))
                       : vue.createCommentVNode("", true),
-                    vue.createElementVNode("ul", {
+                    vue.createElementVNode("ul", vue.mergeProps({
                       ref: $options.listRef,
                       id: $data.id + '_list',
                       class: "p-menu-list p-reset",
@@ -11545,7 +11558,7 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
                       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)))
-                    }, [
+                    }, _ctx.ptm('menu')), [
                       (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()
@@ -11553,16 +11566,16 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
                           (item.items && $options.visible(item) && !item.separator)
                             ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                                 (item.items)
-                                  ? (vue.openBlock(), vue.createElementBlock("li", {
+                                  ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
                                       key: 0,
                                       id: $data.id + '_' + i,
                                       class: "p-submenu-header",
                                       role: "none"
-                                    }, [
+                                    }, _ctx.ptm('submenuHeader')), [
                                       vue.renderSlot(_ctx.$slots, "item", { item: item }, () => [
                                         vue.createTextVNode(vue.toDisplayString($options.label(item)), 1)
                                       ])
-                                    ], 8, _hoisted_4))
+                                    ], 16, _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, {
@@ -11576,26 +11589,27 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
                                           templates: _ctx.$slots,
                                           exact: $props.exact,
                                           focusedOptionId: $options.focusedOptionId,
-                                          onItemClick: $options.itemClick
-                                        }, null, 8, ["id", "item", "templates", "exact", "focusedOptionId", "onItemClick"]))
+                                          onItemClick: $options.itemClick,
+                                          pt: _ctx.pt
+                                        }, null, 8, ["id", "item", "templates", "exact", "focusedOptionId", "onItemClick", "pt"]))
                                       : ($options.visible(child) && child.separator)
-                                        ? (vue.openBlock(), vue.createElementBlock("li", {
+                                        ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
                                             key: 'separator' + i + j,
-                                            class: vue.normalizeClass($options.separatorClass(item)),
-                                            style: vue.normalizeStyle(child.style),
+                                            class: $options.separatorClass(item),
+                                            style: child.style,
                                             role: "separator"
-                                          }, null, 6))
+                                          }, _ctx.ptm('separator')), null, 16))
                                         : vue.createCommentVNode("", true)
                                   ], 64))
                                 }), 128))
                               ], 64))
                             : ($options.visible(item) && item.separator)
-                              ? (vue.openBlock(), vue.createElementBlock("li", {
+                              ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
                                   key: 'separator' + i.toString(),
-                                  class: vue.normalizeClass($options.separatorClass(item)),
-                                  style: vue.normalizeStyle(item.style),
+                                  class: $options.separatorClass(item),
+                                  style: item.style,
                                   role: "separator"
-                                }, null, 6))
+                                }, _ctx.ptm('separator')), null, 16))
                               : (vue.openBlock(), vue.createBlock(_component_PVMenuitem, {
                                   key: $options.label(item) + i.toString(),
                                   id: $data.id + '_' + i,
@@ -11603,15 +11617,19 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
                                   templates: _ctx.$slots,
                                   exact: $props.exact,
                                   focusedOptionId: $options.focusedOptionId,
-                                  onItemClick: $options.itemClick
-                                }, null, 8, ["id", "item", "templates", "exact", "focusedOptionId", "onItemClick"]))
+                                  onItemClick: $options.itemClick,
+                                  pt: _ctx.pt
+                                }, null, 8, ["id", "item", "templates", "exact", "focusedOptionId", "onItemClick", "pt"]))
                         ], 64))
                       }), 128))
-                    ], 40, _hoisted_3),
+                    ], 16, _hoisted_2),
                     (_ctx.$slots.end)
-                      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+                      ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                          key: 1,
+                          class: "p-menu-end"
+                        }, _ctx.ptm('end')), [
                           vue.renderSlot(_ctx.$slots, "end")
-                        ]))
+                        ], 16))
                       : vue.createCommentVNode("", true)
                   ], 16, _hoisted_1))
                 : vue.createCommentVNode("", true)
@@ -11657,14 +11675,15 @@ this.primevue.menu = (function (OverlayEventBus, Portal, utils, Ripple, vue) {
 
     return script;
 
-})(primevue.overlayeventbus, primevue.portal, primevue.utils, primevue.ripple, Vue);
+})(primevue.basecomponent, primevue.overlayeventbus, primevue.portal, primevue.utils, primevue.ripple, Vue);
 
 this.primevue = this.primevue || {};
-this.primevue.tieredmenu = (function (OverlayEventBus, Portal, utils, AngleRightIcon, Ripple, vue) {
+this.primevue.tieredmenu = (function (BaseComponent, OverlayEventBus, Portal, utils, AngleRightIcon, Ripple, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var OverlayEventBus__default = /*#__PURE__*/_interopDefaultLegacy(OverlayEventBus);
     var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
     var AngleRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(AngleRightIcon);
@@ -11672,6 +11691,7 @@ this.primevue.tieredmenu = (function (OverlayEventBus, Portal, utils, AngleRight
 
     var script$1 = {
         name: 'TieredMenuSub',
+        extends: BaseComponent__default["default"],
         emits: ['item-click', 'item-mouseenter'],
         props: {
             menuId: {
@@ -11716,6 +11736,14 @@ this.primevue.tieredmenu = (function (OverlayEventBus, Portal, utils, AngleRight
             getItemLabel(processedItem) {
                 return this.getItemProp(processedItem, 'label');
             },
+            getPTOptions(processedItem, key) {
+                return this.ptm(key, {
+                    context: {
+                        active: this.isItemActive(processedItem),
+                        focused: this.isItemFocused(processedItem)
+                    }
+                });
+            },
             isItemActive(processedItem) {
                 return this.activeItemPath.some((path) => path.key === processedItem.key);
             },
@@ -11785,10 +11813,8 @@ this.primevue.tieredmenu = (function (OverlayEventBus, Portal, utils, AngleRight
     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 = ["id"];
+    const _hoisted_4 = ["href", "target"];
+    const _hoisted_5 = ["id"];
 
     function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_router_link = vue.resolveComponent("router-link");
@@ -11796,17 +11822,17 @@ this.primevue.tieredmenu = (function (OverlayEventBus, Portal, utils, AngleRight
       const _component_TieredMenuSub = vue.resolveComponent("TieredMenuSub", true);
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return (vue.openBlock(), vue.createElementBlock("ul", null, [
+      return (vue.openBlock(), vue.createElementBlock("ul", vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('menu'))), [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.items, (processedItem, index) => {
           return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
             key: $options.getItemKey(processedItem)
           }, [
             ($options.isItemVisible(processedItem) && !$options.getItemProp(processedItem, 'separator'))
-              ? (vue.openBlock(), vue.createElementBlock("li", {
+              ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
                   key: 0,
                   id: $options.getItemId(processedItem),
-                  style: vue.normalizeStyle($options.getItemProp(processedItem, 'style')),
-                  class: vue.normalizeClass($options.getItemClass(processedItem)),
+                  style: $options.getItemProp(processedItem, 'style'),
+                  class: $options.getItemClass(processedItem),
                   role: "menuitem",
                   "aria-label": $options.getItemLabel(processedItem),
                   "aria-disabled": $options.isItemDisabled(processedItem) || undefined,
@@ -11815,12 +11841,12 @@ this.primevue.tieredmenu = (function (OverlayEventBus, Portal, utils, AngleRight
                   "aria-level": $props.level + 1,
                   "aria-setsize": $options.getAriaSetSize(),
                   "aria-posinset": $options.getAriaPosInset(index)
-                }, [
-                  vue.createElementVNode("div", {
+                }, $options.getPTOptions(processedItem, 'menuitem')), [
+                  vue.createElementVNode("div", vue.mergeProps({
                     class: "p-menuitem-content",
                     onClick: $event => ($options.onItemClick($event, processedItem)),
                     onMouseenter: $event => ($options.onItemMouseEnter($event, processedItem))
-                  }, [
+                  }, $options.getPTOptions(processedItem, 'content')), [
                     (!$props.templates.item)
                       ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                           ($options.getItemProp(processedItem, 'to') && !$options.isItemDisabled(processedItem))
@@ -11830,13 +11856,13 @@ this.primevue.tieredmenu = (function (OverlayEventBus, Portal, utils, AngleRight
                                 custom: ""
                               }, {
                                 default: vue.withCtx(({ navigate, href, isActive, isExactActive }) => [
-                                  vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
+                                  vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({
                                     href: href,
-                                    class: vue.normalizeClass($options.getItemActionClass(processedItem, { isActive, isExactActive })),
+                                    class: $options.getItemActionClass(processedItem, { isActive, isExactActive }),
                                     tabindex: "-1",
                                     "aria-hidden": "true",
                                     onClick: $event => ($options.onItemActionClick($event, navigate))
-                                  }, [
+                                  }, $options.getPTOptions(processedItem, 'action')), [
                                     ($props.templates.itemicon)
                                       ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.itemicon), {
                                           key: 0,
@@ -11844,26 +11870,26 @@ this.primevue.tieredmenu = (function (OverlayEventBus, Portal, utils, AngleRight
                                           class: vue.normalizeClass($options.getItemIconClass(processedItem))
                                         }, null, 8, ["item", "class"]))
                                       : ($options.getItemProp(processedItem, 'icon'))
-                                        ? (vue.openBlock(), vue.createElementBlock("span", {
+                                        ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                                             key: 1,
-                                            class: vue.normalizeClass($options.getItemIconClass(processedItem))
-                                          }, null, 2))
+                                            class: $options.getItemIconClass(processedItem)
+                                          }, $options.getPTOptions(processedItem, 'icon')), null, 16))
                                         : vue.createCommentVNode("", true),
-                                    vue.createElementVNode("span", _hoisted_4, vue.toDisplayString($options.getItemLabel(processedItem)), 1)
-                                  ], 10, _hoisted_3)), [
+                                    vue.createElementVNode("span", vue.mergeProps({ class: "p-menuitem-text" }, $options.getPTOptions(processedItem, 'label')), vue.toDisplayString($options.getItemLabel(processedItem)), 17)
+                                  ], 16, _hoisted_3)), [
                                     [_directive_ripple]
                                   ])
                                 ]),
                                 _: 2
                               }, 1032, ["to"]))
-                            : vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", {
+                            : vue.withDirectives((vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({
                                 key: 1,
                                 href: $options.getItemProp(processedItem, 'url'),
-                                class: vue.normalizeClass($options.getItemActionClass(processedItem)),
+                                class: $options.getItemActionClass(processedItem),
                                 target: $options.getItemProp(processedItem, 'target'),
                                 tabindex: "-1",
                                 "aria-hidden": "true"
-                              }, [
+                              }, $options.getPTOptions(processedItem, 'action')), [
                                 ($props.templates.itemicon)
                                   ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.itemicon), {
                                       key: 0,
@@ -11871,27 +11897,27 @@ this.primevue.tieredmenu = (function (OverlayEventBus, Portal, utils, AngleRight
                                       class: vue.normalizeClass($options.getItemIconClass(processedItem))
                                     }, null, 8, ["item", "class"]))
                                   : ($options.getItemProp(processedItem, 'icon'))
-                                    ? (vue.openBlock(), vue.createElementBlock("span", {
+                                    ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                                         key: 1,
-                                        class: vue.normalizeClass($options.getItemIconClass(processedItem))
-                                      }, null, 2))
+                                        class: $options.getItemIconClass(processedItem)
+                                      }, $options.getPTOptions(processedItem, 'icon')), null, 16))
                                     : vue.createCommentVNode("", true),
-                                vue.createElementVNode("span", _hoisted_6, vue.toDisplayString($options.getItemLabel(processedItem)), 1),
+                                vue.createElementVNode("span", vue.mergeProps({ class: "p-menuitem-text" }, $options.getPTOptions(processedItem, 'label')), vue.toDisplayString($options.getItemLabel(processedItem)), 17),
                                 ($options.getItemProp(processedItem, 'items'))
                                   ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
                                       ($props.templates.submenuicon)
-                                        ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.submenuicon), {
+                                        ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.submenuicon), vue.mergeProps({
                                             key: 0,
                                             class: "p-submenu-icon",
                                             active: $options.isItemActive(processedItem)
-                                          }, null, 8, ["active"]))
-                                        : (vue.openBlock(), vue.createBlock(_component_AngleRightIcon, {
+                                          }, $options.getPTOptions(processedItem, 'submenuIcon')), null, 16, ["active"]))
+                                        : (vue.openBlock(), vue.createBlock(_component_AngleRightIcon, vue.mergeProps({
                                             key: 1,
                                             class: "p-submenu-icon"
-                                          }))
+                                          }, $options.getPTOptions(processedItem, 'submenuIcon')), null, 16))
                                     ], 64))
                                   : vue.createCommentVNode("", true)
-                              ], 10, _hoisted_5)), [
+                              ], 16, _hoisted_4)), [
                                 [_directive_ripple]
                               ])
                         ], 64))
@@ -11899,7 +11925,7 @@ this.primevue.tieredmenu = (function (OverlayEventBus, Portal, utils, AngleRight
                           key: 1,
                           item: processedItem.item
                         }, null, 8, ["item"]))
-                  ], 40, _hoisted_2),
+                  ], 16, _hoisted_2),
                   ($options.isItemVisible(processedItem) && $options.isItemGroup(processedItem))
                     ? (vue.openBlock(), vue.createBlock(_component_TieredMenuSub, {
                         key: 0,
@@ -11913,30 +11939,32 @@ this.primevue.tieredmenu = (function (OverlayEventBus, Portal, utils, AngleRight
                         activeItemPath: $props.activeItemPath,
                         exact: $props.exact,
                         level: $props.level + 1,
+                        pt: _ctx.pt,
                         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", "templates", "activeItemPath", "exact", "level"]))
+                      }, null, 8, ["id", "menuId", "focusedItemId", "items", "templates", "activeItemPath", "exact", "level", "pt"]))
                     : vue.createCommentVNode("", true)
-                ], 14, _hoisted_1$1))
+                ], 16, _hoisted_1$1))
               : vue.createCommentVNode("", true),
             ($options.isItemVisible(processedItem) && $options.getItemProp(processedItem, 'separator'))
-              ? (vue.openBlock(), vue.createElementBlock("li", {
+              ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
                   key: 1,
                   id: $options.getItemId(processedItem),
-                  style: vue.normalizeStyle($options.getItemProp(processedItem, 'style')),
-                  class: vue.normalizeClass($options.getSeparatorItemClass(processedItem)),
+                  style: $options.getItemProp(processedItem, 'style'),
+                  class: $options.getSeparatorItemClass(processedItem),
                   role: "separator"
-                }, null, 14, _hoisted_7))
+                }, _ctx.ptm('separator')), null, 16, _hoisted_5))
               : vue.createCommentVNode("", true)
           ], 64))
         }), 128))
-      ]))
+      ], 16))
     }
 
     script$1.render = render$1;
 
     var script = {
         name: 'TieredMenu',
+        extends: BaseComponent__default["default"],
         inheritAttrs: false,
         emits: ['focus', 'blur', 'before-show', 'before-hide', 'hide', 'show'],
         props: {
@@ -12573,7 +12601,7 @@ this.primevue.tieredmenu = (function (OverlayEventBus, Portal, utils, AngleRight
                     id: $data.id,
                     class: $options.containerClass,
                     onClick: _cache[0] || (_cache[0] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args)))
-                  }, _ctx.$attrs), [
+                  }, { ..._ctx.$attrs, ..._ctx.ptm('root') }), [
                     vue.createVNode(_component_TieredMenuSub, {
                       ref: $options.menubarRef,
                       id: $data.id + '_list',
@@ -12592,12 +12620,13 @@ this.primevue.tieredmenu = (function (OverlayEventBus, Portal, utils, AngleRight
                       activeItemPath: $data.activeItemPath,
                       exact: $props.exact,
                       level: 0,
+                      pt: _ctx.pt,
                       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", "templates", "activeItemPath", "exact", "onFocus", "onBlur", "onKeydown", "onItemClick", "onItemMouseenter"])
+                    }, null, 8, ["id", "tabindex", "aria-label", "aria-labelledby", "aria-disabled", "aria-activedescendant", "menuId", "focusedItemId", "items", "templates", "activeItemPath", "exact", "pt", "onFocus", "onBlur", "onKeydown", "onItemClick", "onItemMouseenter"])
                   ], 16, _hoisted_1))
                 : vue.createCommentVNode("", true)
             ]),
@@ -12642,14 +12671,19 @@ this.primevue.tieredmenu = (function (OverlayEventBus, Portal, utils, AngleRight
 
     return script;
 
-})(primevue.overlayeventbus, primevue.portal, primevue.utils, primevue.icons.angleright, primevue.ripple, Vue);
+})(primevue.basecomponent, primevue.overlayeventbus, primevue.portal, primevue.utils, primevue.icons.angleright, primevue.ripple, Vue);
 
 this.primevue = this.primevue || {};
-this.primevue.badge = (function (utils, vue) {
+this.primevue.badge = (function (BaseComponent, utils, vue) {
     'use strict';
 
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+
     var script = {
         name: 'Badge',
+        extends: BaseComponent__default["default"],
         props: {
             value: {
                 type: [String, Number],
@@ -12687,18 +12721,16 @@ this.primevue.badge = (function (utils, vue) {
     };
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
-      return (vue.openBlock(), vue.createElementBlock("span", {
-        class: vue.normalizeClass($options.badgeClass)
-      }, [
+      return (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({ class: $options.badgeClass }, _ctx.ptm('root')), [
         vue.renderSlot(_ctx.$slots, "default", {}, () => [
           vue.createTextVNode(vue.toDisplayString($props.value), 1)
         ])
-      ], 2))
+      ], 16))
     }
 
     script.render = render;
 
     return script;
 
-})(primevue.utils, Vue);
+})(primevue.basecomponent, primevue.utils, Vue);