primevue 3.27.0 → 3.29.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 });
@@ -1912,7 +1914,7 @@ this.primevue.portal = (function (utils, vue) {
 })(primevue.utils, Vue);
 
 this.primevue = this.primevue || {};
-this.primevue.basecomponent = (function (utils) {
+this.primevue.basecomponent = (function (utils, vue) {
     'use strict';
 
     var script = {
@@ -1920,27 +1922,47 @@ this.primevue.basecomponent = (function (utils) {
         props: {
             pt: {
                 type: Object,
-                value: {}
+                default: undefined
             }
         },
         methods: {
-            getPTItem(obj = {}, key = '') {
+            getOption(obj = {}, key = '') {
                 const fKey = utils.ObjectUtils.convertToFlatCase(key);
 
                 return obj[Object.keys(obj).find((k) => utils.ObjectUtils.convertToFlatCase(k) === fKey) || ''];
             },
+            getPTValue(obj = {}, key = '', params = {}) {
+                const self = utils.ObjectUtils.getItemValue(this.getOption(obj, key), params);
+                const globalPT = utils.ObjectUtils.getItemValue(this.getOption(this.defaultPT, key), params);
+                const merged = vue.mergeProps(self, globalPT);
+
+                return merged;
+                /*
+                 * @todo: The 'class' option in self can always be more powerful to style the component easily.
+                 *
+                 * return self && self['class'] ? { ...merged, ...{ class: self['class'] } } : merged;
+                 */
+            },
             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);
+            }
+        },
+        computed: {
+            defaultPT() {
+                return utils.ObjectUtils.getItemValue(this.getOption(this.$primevue.config.pt, this.$.type.name), this.defaultsParams);
+            },
+            defaultsParams() {
+                return { instance: this.$ };
             }
         }
     };
 
     return script;
 
-})(primevue.utils);
+})(primevue.utils, Vue);
 
 this.primevue = this.primevue || {};
 this.primevue.baseicon = (function (utils) {
@@ -1951,11 +1973,11 @@ this.primevue.baseicon = (function (utils) {
         props: {
             label: {
                 type: String,
-                value: undefined
+                default: undefined
             },
             spin: {
                 type: Boolean,
-                value: false
+                default: false
             }
         },
         methods: {
@@ -4033,6 +4055,8 @@ this.primevue = this.primevue || {};
 this.primevue.tooltip = (function (utils) {
     'use strict';
 
+    let timer;
+
     function bindEvents(el) {
         const modifiers = el.$_ptooltipModifiers;
 
@@ -4080,30 +4104,45 @@ this.primevue.tooltip = (function (utils) {
     }
 
     function onMouseEnter(event) {
-        show(event.currentTarget);
+        const el = event.currentTarget;
+        const showDelay = el.$_ptooltipShowDelay;
+
+        show(el, showDelay);
     }
 
     function onMouseLeave(event) {
-        hide(event.currentTarget);
+        const el = event.currentTarget;
+        const hideDelay = el.$_ptooltipHideDelay;
+
+        hide(el, hideDelay);
     }
 
     function onFocus(event) {
-        show(event.currentTarget);
+        const el = event.currentTarget;
+        const showDelay = el.$_ptooltipShowDelay;
+
+        show(el, showDelay);
     }
 
     function onBlur(event) {
-        hide(event.currentTarget);
+        const el = event.currentTarget;
+        const hideDelay = el.$_ptooltipHideDelay;
+
+        hide(el, hideDelay);
     }
 
     function onClick(event) {
-        hide(event.currentTarget);
+        const el = event.currentTarget;
+        const hideDelay = el.$_ptooltipHideDelay;
+
+        hide(el, hideDelay);
     }
 
     function onKeydown(event) {
-        event.code === 'Escape' && hide(event.currentTarget);
+        event.code === 'Escape' && hide(event.currentTarget, hideDelay);
     }
 
-    function show(el) {
+    function tooltipActions(el) {
         if (el.$_ptooltipDisabled) {
             return;
         }
@@ -4125,11 +4164,29 @@ this.primevue.tooltip = (function (utils) {
         utils.ZIndexUtils.set('tooltip', tooltipElement, el.$_ptooltipZIndex);
     }
 
-    function hide(el) {
+    function show(el, showDelay) {
+        if (showDelay !== undefined) {
+            timer = setTimeout(() => tooltipActions(el), showDelay);
+        } else {
+            tooltipActions(el);
+        }
+    }
+
+    function tooltipRemoval(el) {
         remove(el);
         unbindScrollListener(el);
     }
 
+    function hide(el, hideDelay) {
+        clearTimeout(timer);
+
+        if (hideDelay !== undefined) {
+            setTimeout(() => tooltipRemoval(el), hideDelay);
+        } else {
+            tooltipRemoval(el);
+        }
+    }
+
     function getTooltipElement(el) {
         return document.getElementById(el.$_ptooltipId);
     }
@@ -4354,7 +4411,8 @@ this.primevue.tooltip = (function (utils) {
                 target.$_ptooltipEscape = false;
                 target.$_ptooltipClass = null;
                 target.$_ptooltipFitContent = true;
-                target.$_ptooltipIdAttr = '';
+                target.$_ptooltipShowDelay = 0;
+                target.$_ptooltipHideDelay = 0;
             } else if (typeof options.value === 'object' && options.value) {
                 if (utils.ObjectUtils.isEmpty(options.value.value) || options.value.value.trim() === '') return;
                 else {
@@ -4365,6 +4423,8 @@ this.primevue.tooltip = (function (utils) {
                     target.$_ptooltipClass = options.value.class;
                     target.$_ptooltipFitContent = !!options.value.fitContent === options.value.fitContent ? options.value.fitContent : true;
                     target.$_ptooltipIdAttr = options.value.id || '';
+                    target.$_ptooltipShowDelay = options.value.showDelay || 0;
+                    target.$_ptooltipHideDelay = options.value.hideDelay || 0;
                 }
             }
 
@@ -4396,6 +4456,8 @@ this.primevue.tooltip = (function (utils) {
                 target.$_ptooltipEscape = false;
                 target.$_ptooltipClass = null;
                 target.$_ptooltipIdAttr = '';
+                target.$_ptooltipShowDelay = 0;
+                target.$_ptooltipHideDelay = 0;
 
                 bindEvents(target);
             } else if (typeof options.value === 'object' && options.value) {
@@ -4410,6 +4472,8 @@ this.primevue.tooltip = (function (utils) {
                     target.$_ptooltipClass = options.value.class;
                     target.$_ptooltipFitContent = !!options.value.fitContent === options.value.fitContent ? options.value.fitContent : true;
                     target.$_ptooltipIdAttr = options.value.id || '';
+                    target.$_ptooltipShowDelay = options.value.showDelay || 0;
+                    target.$_ptooltipHideDelay = options.value.hideDelay || 0;
 
                     bindEvents(target);
                 }
@@ -4541,15 +4605,17 @@ this.primevue.focustrap = (function (utils) {
 })(primevue.utils);
 
 this.primevue = this.primevue || {};
-this.primevue.virtualscroller = (function (SpinnerIcon, utils, vue) {
+this.primevue.virtualscroller = (function (BaseComponent, SpinnerIcon, 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 SpinnerIcon__default = /*#__PURE__*/_interopDefaultLegacy(SpinnerIcon);
 
     var script = {
         name: 'VirtualScroller',
+        extends: BaseComponent__default["default"],
         emits: ['update:numToleratedItems', 'scroll', 'scroll-index-change', 'lazy-load'],
         props: {
             id: {
@@ -5258,14 +5324,14 @@ this.primevue.virtualscroller = (function (SpinnerIcon, utils, vue) {
       const _component_SpinnerIcon = vue.resolveComponent("SpinnerIcon");
 
       return (!$props.disabled)
-        ? (vue.openBlock(), vue.createElementBlock("div", {
+        ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
             key: 0,
             ref: $options.elementRef,
-            class: vue.normalizeClass($options.containerClass),
+            class: $options.containerClass,
             tabindex: $props.tabindex,
-            style: vue.normalizeStyle($props.style),
+            style: $props.style,
             onScroll: _cache[0] || (_cache[0] = (...args) => ($options.onScroll && $options.onScroll(...args)))
-          }, [
+          }, _ctx.ptm('root')), [
             vue.renderSlot(_ctx.$slots, "content", {
               styleClass: $options.contentClass,
               items: $options.loadedItems,
@@ -5282,11 +5348,11 @@ this.primevue.virtualscroller = (function (SpinnerIcon, utils, vue) {
               horizontal: $options.isHorizontal(),
               both: $options.isBoth()
             }, () => [
-              vue.createElementVNode("div", {
+              vue.createElementVNode("div", vue.mergeProps({
                 ref: $options.contentRef,
-                class: vue.normalizeClass($options.contentClass),
-                style: vue.normalizeStyle($data.contentStyle)
-              }, [
+                class: $options.contentClass,
+                style: $data.contentStyle
+              }, _ctx.ptm('content')), [
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.loadedItems, (item, index) => {
                   return vue.renderSlot(_ctx.$slots, "item", {
                     key: index,
@@ -5294,20 +5360,20 @@ this.primevue.virtualscroller = (function (SpinnerIcon, utils, vue) {
                     options: $options.getOptions(index)
                   })
                 }), 128))
-              ], 6)
+              ], 16)
             ]),
             ($props.showSpacer)
-              ? (vue.openBlock(), vue.createElementBlock("div", {
+              ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                   key: 0,
                   class: "p-virtualscroller-spacer",
-                  style: vue.normalizeStyle($data.spacerStyle)
-                }, null, 4))
+                  style: $data.spacerStyle
+                }, _ctx.ptm('spacer')), null, 16))
               : vue.createCommentVNode("", true),
             (!$props.loaderDisabled && $props.showLoader && $data.d_loading)
-              ? (vue.openBlock(), vue.createElementBlock("div", {
+              ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                   key: 1,
-                  class: vue.normalizeClass($options.loaderClass)
-                }, [
+                  class: $options.loaderClass
+                }, _ctx.ptm('loader')), [
                   (_ctx.$slots && _ctx.$slots.loader)
                     ? (vue.openBlock(true), vue.createElementBlock(vue.Fragment, { key: 0 }, vue.renderList($data.loaderArr, (_, index) => {
                         return vue.renderSlot(_ctx.$slots, "loader", {
@@ -5317,14 +5383,14 @@ this.primevue.virtualscroller = (function (SpinnerIcon, utils, vue) {
                       }), 128))
                     : vue.createCommentVNode("", true),
                   vue.renderSlot(_ctx.$slots, "loadingicon", {}, () => [
-                    vue.createVNode(_component_SpinnerIcon, {
+                    vue.createVNode(_component_SpinnerIcon, vue.mergeProps({
                       spin: "",
                       class: "p-virtualscroller-loading-icon"
-                    })
+                    }, _ctx.ptm('loadingIcon')), null, 16)
                   ])
-                ], 2))
+                ], 16))
               : vue.createCommentVNode("", true)
-          ], 46, _hoisted_1))
+          ], 16, _hoisted_1))
         : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
             vue.renderSlot(_ctx.$slots, "default"),
             vue.renderSlot(_ctx.$slots, "content", {
@@ -5369,7 +5435,7 @@ this.primevue.virtualscroller = (function (SpinnerIcon, utils, vue) {
 
     return script;
 
-})(primevue.icons.spinner, primevue.utils, Vue);
+})(primevue.basecomponent, primevue.icons.spinner, primevue.utils, Vue);
 
 this.primevue = this.primevue || {};
 this.primevue.confirmationeventbus = (function (utils) {
@@ -5497,16 +5563,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 +5706,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,14 +5762,19 @@ 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) {
+this.primevue.inputtext = (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: 'InputText',
+        extends: BaseComponent__default["default"],
         emits: ['update:modelValue'],
         props: {
             modelValue: null
@@ -5725,25 +5794,26 @@ this.primevue.inputtext = (function (vue) {
     const _hoisted_1 = ["value"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
-      return (vue.openBlock(), vue.createElementBlock("input", {
-        class: vue.normalizeClass(['p-inputtext p-component', { 'p-filled': $options.filled }]),
+      return (vue.openBlock(), vue.createElementBlock("input", vue.mergeProps({
+        class: ['p-inputtext p-component', { 'p-filled': $options.filled }],
         value: $props.modelValue,
         onInput: _cache[0] || (_cache[0] = (...args) => ($options.onInput && $options.onInput(...args)))
-      }, null, 42, _hoisted_1))
+      }, _ctx.ptm('root')), null, 16, _hoisted_1))
     }
 
     script.render = render;
 
     return script;
 
-})(Vue);
+})(primevue.basecomponent, Vue);
 
 this.primevue = this.primevue || {};
-this.primevue.inputnumber = (function (Button, AngleDownIcon, AngleUpIcon, InputText, utils, vue) {
+this.primevue.inputnumber = (function (BaseComponent, Button, AngleDownIcon, AngleUpIcon, InputText, 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 Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
     var AngleDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(AngleDownIcon);
     var AngleUpIcon__default = /*#__PURE__*/_interopDefaultLegacy(AngleUpIcon);
@@ -5751,6 +5821,7 @@ this.primevue.inputnumber = (function (Button, AngleDownIcon, AngleUpIcon, Input
 
     var script = {
         name: 'InputNumber',
+        extends: BaseComponent__default["default"],
         emits: ['update:modelValue', 'input', 'focus', 'blur'],
         props: {
             modelValue: {
@@ -6810,18 +6881,11 @@ this.primevue.inputnumber = (function (Button, AngleDownIcon, AngleUpIcon, Input
         }
     };
 
-    const _hoisted_1 = {
-      key: 0,
-      class: "p-inputnumber-button-group"
-    };
-
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_INInputText = vue.resolveComponent("INInputText");
       const _component_INButton = vue.resolveComponent("INButton");
 
-      return (vue.openBlock(), vue.createElementBlock("span", {
-        class: vue.normalizeClass($options.containerClass)
-      }, [
+      return (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({ class: $options.containerClass }, _ctx.ptm('root')), [
         vue.createVNode(_component_INInputText, vue.mergeProps({
           ref: "input",
           id: $props.inputId,
@@ -6844,19 +6908,20 @@ this.primevue.inputnumber = (function (Button, AngleDownIcon, AngleUpIcon, Input
           onClick: $options.onInputClick,
           onFocus: $options.onInputFocus,
           onBlur: $options.onInputBlur
-        }, $props.inputProps), null, 16, ["id", "class", "style", "value", "aria-valuemin", "aria-valuemax", "aria-valuenow", "disabled", "readonly", "placeholder", "aria-labelledby", "aria-label", "onInput", "onKeydown", "onKeypress", "onPaste", "onClick", "onFocus", "onBlur"]),
+        }, { ...$props.inputProps, ..._ctx.ptm('input') }), null, 16, ["id", "class", "style", "value", "aria-valuemin", "aria-valuemax", "aria-valuenow", "disabled", "readonly", "placeholder", "aria-labelledby", "aria-label", "onInput", "onKeydown", "onKeypress", "onPaste", "onClick", "onFocus", "onBlur"]),
         ($props.showButtons && $props.buttonLayout === 'stacked')
-          ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [
+          ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+              key: 0,
+              class: "p-inputnumber-button-group"
+            }, _ctx.ptm('buttonGroup')), [
               vue.createVNode(_component_INButton, vue.mergeProps({ class: $options.upButtonClass }, vue.toHandlers($options.upButtonListeners), {
                 disabled: $props.disabled,
                 tabindex: -1,
                 "aria-hidden": "true"
-              }, $props.incrementButtonProps), {
+              }, { ...$props.incrementButtonProps, ..._ctx.ptm('incrementButton') }), {
                 icon: vue.withCtx(() => [
                   vue.renderSlot(_ctx.$slots, "incrementbuttonicon", {}, () => [
-                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.incrementButtonIcon ? 'span' : 'AngleUpIcon'), {
-                      class: vue.normalizeClass($props.incrementButtonIcon)
-                    }, null, 8, ["class"]))
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.incrementButtonIcon ? 'span' : 'AngleUpIcon'), vue.mergeProps({ class: $props.incrementButtonIcon }, _ctx.ptm('incrementButton')['icon']), null, 16, ["class"]))
                   ])
                 ]),
                 _: 3
@@ -6865,17 +6930,15 @@ this.primevue.inputnumber = (function (Button, AngleDownIcon, AngleUpIcon, Input
                 disabled: $props.disabled,
                 tabindex: -1,
                 "aria-hidden": "true"
-              }, $props.decrementButtonProps), {
+              }, { ...$props.decrementButtonProps, ..._ctx.ptm('decrementButton') }), {
                 icon: vue.withCtx(() => [
                   vue.renderSlot(_ctx.$slots, "decrementbuttonicon", {}, () => [
-                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.decrementButtonIcon ? 'span' : 'AngleDownIcon'), {
-                      class: vue.normalizeClass($props.decrementButtonIcon)
-                    }, null, 8, ["class"]))
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.decrementButtonIcon ? 'span' : 'AngleDownIcon'), vue.mergeProps({ class: $props.decrementButtonIcon }, _ctx.ptm('decrementButton')['icon']), null, 16, ["class"]))
                   ])
                 ]),
                 _: 3
               }, 16, ["class", "disabled"])
-            ]))
+            ], 16))
           : vue.createCommentVNode("", true),
         ($props.showButtons && $props.buttonLayout !== 'stacked')
           ? (vue.openBlock(), vue.createBlock(_component_INButton, vue.mergeProps({
@@ -6885,12 +6948,10 @@ this.primevue.inputnumber = (function (Button, AngleDownIcon, AngleUpIcon, Input
               disabled: $props.disabled,
               tabindex: -1,
               "aria-hidden": "true"
-            }, $props.incrementButtonProps), {
+            }, { ...$props.incrementButtonProps, ..._ctx.ptm('incrementButton') }), {
               icon: vue.withCtx(() => [
                 vue.renderSlot(_ctx.$slots, "incrementbuttonicon", {}, () => [
-                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.incrementButtonIcon ? 'span' : 'AngleUpIcon'), {
-                    class: vue.normalizeClass($props.incrementButtonIcon)
-                  }, null, 8, ["class"]))
+                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.incrementButtonIcon ? 'span' : 'AngleUpIcon'), vue.mergeProps({ class: $props.incrementButtonIcon }, _ctx.ptm('incrementButton')['icon']), null, 16, ["class"]))
                 ])
               ]),
               _: 3
@@ -6904,18 +6965,16 @@ this.primevue.inputnumber = (function (Button, AngleDownIcon, AngleUpIcon, Input
               disabled: $props.disabled,
               tabindex: -1,
               "aria-hidden": "true"
-            }, $props.decrementButtonProps), {
+            }, { ...$props.decrementButtonProps, ..._ctx.ptm('decrementButton') }), {
               icon: vue.withCtx(() => [
                 vue.renderSlot(_ctx.$slots, "decrementbuttonicon", {}, () => [
-                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.decrementButtonIcon ? 'span' : 'AngleDownIcon'), {
-                    class: vue.normalizeClass($props.decrementButtonIcon)
-                  }, null, 8, ["class"]))
+                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.decrementButtonIcon ? 'span' : 'AngleDownIcon'), vue.mergeProps({ class: $props.decrementButtonIcon }, _ctx.ptm('decrementButton')['icon']), null, 16, ["class"]))
                 ])
               ]),
               _: 3
             }, 16, ["class", "disabled"]))
           : vue.createCommentVNode("", true)
-      ], 2))
+      ], 16))
     }
 
     function styleInject(css, ref) {
@@ -6952,14 +7011,15 @@ this.primevue.inputnumber = (function (Button, AngleDownIcon, AngleUpIcon, Input
 
     return script;
 
-})(primevue.button, primevue.icons.angledown, primevue.icons.angleup, primevue.inputtext, primevue.utils, Vue);
+})(primevue.basecomponent, 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 +7029,7 @@ this.primevue.message = (function (CheckIcon, ExclamationTriangleIcon, InfoCircl
 
     var script = {
         name: 'Message',
+        extends: BaseComponent__default["default"],
         emits: ['close'],
         props: {
             severity: {
@@ -7050,9 +7111,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 +7122,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 +7144,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 +7203,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 +7256,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,14 +7328,15 @@ 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) {
+this.primevue.dropdown = (function (api, BaseComponent, ChevronDownIcon, FilterIcon, SpinnerIcon, TimesIcon, OverlayEventBus, Portal, Ripple, utils, VirtualScroller, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var ChevronDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(ChevronDownIcon);
     var FilterIcon__default = /*#__PURE__*/_interopDefaultLegacy(FilterIcon);
     var SpinnerIcon__default = /*#__PURE__*/_interopDefaultLegacy(SpinnerIcon);
@@ -7287,6 +7348,7 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
 
     var script = {
         name: 'Dropdown',
+        extends: BaseComponent__default["default"],
         emits: ['update:modelValue', 'change', 'focus', 'blur', 'before-show', 'before-hide', 'show', 'hide', 'filter'],
         props: {
             modelValue: null,
@@ -7507,6 +7569,15 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
             getOptionRenderKey(option, index) {
                 return (this.dataKey ? utils.ObjectUtils.resolveFieldData(option, this.dataKey) : this.getOptionLabel(option)) + '_' + index;
             },
+            getPTOptions(option, itemOptions, index, key) {
+                return this.ptm(key, {
+                    context: {
+                        selected: this.isSelected(option),
+                        focused: this.focusedOptionIndex === this.getOptionIndex(index, itemOptions),
+                        disabled: this.isOptionDisabled(option)
+                    }
+                });
+            },
             isOptionDisabled(option) {
                 return this.optionDisabled ? utils.ObjectUtils.resolveFieldData(option, this.optionDisabled) : false;
             },
@@ -8074,7 +8145,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
                     }
@@ -8191,42 +8262,10 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
     const _hoisted_1 = ["id"];
     const _hoisted_2 = ["id", "value", "placeholder", "tabindex", "disabled", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant"];
     const _hoisted_3 = ["id", "tabindex", "aria-label", "aria-labelledby", "aria-expanded", "aria-controls", "aria-activedescendant", "aria-disabled"];
-    const _hoisted_4 = { class: "p-dropdown-trigger" };
-    const _hoisted_5 = {
-      key: 0,
-      class: "p-dropdown-header"
-    };
-    const _hoisted_6 = { class: "p-dropdown-filter-container" };
-    const _hoisted_7 = ["value", "placeholder", "aria-owns", "aria-activedescendant"];
-    const _hoisted_8 = {
-      role: "status",
-      "aria-live": "polite",
-      class: "p-hidden-accessible"
-    };
-    const _hoisted_9 = ["id"];
-    const _hoisted_10 = ["id"];
-    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_13 = {
-      key: 1,
-      class: "p-dropdown-empty-message",
-      role: "option"
-    };
-    const _hoisted_14 = {
-      key: 1,
-      role: "status",
-      "aria-live": "polite",
-      class: "p-hidden-accessible"
-    };
-    const _hoisted_15 = {
-      role: "status",
-      "aria-live": "polite",
-      class: "p-hidden-accessible"
-    };
+    const _hoisted_4 = ["value", "placeholder", "aria-owns", "aria-activedescendant"];
+    const _hoisted_5 = ["id"];
+    const _hoisted_6 = ["id"];
+    const _hoisted_7 = ["id", "aria-label", "aria-selected", "aria-disabled", "aria-setsize", "aria-posinset", "onClick", "onMousemove"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_SpinnerIcon = vue.resolveComponent("SpinnerIcon");
@@ -8234,12 +8273,12 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
       const _component_Portal = vue.resolveComponent("Portal");
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return (vue.openBlock(), vue.createElementBlock("div", {
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
         ref: "container",
         id: $data.id,
-        class: vue.normalizeClass($options.containerClass),
+        class: $options.containerClass,
         onClick: _cache[15] || (_cache[15] = (...args) => ($options.onContainerClick && $options.onContainerClick(...args)))
-      }, [
+      }, _ctx.ptm('root')), [
         ($props.editable)
           ? (vue.openBlock(), vue.createElementBlock("input", vue.mergeProps({
               key: 0,
@@ -8264,7 +8303,7 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
               onBlur: _cache[1] || (_cache[1] = (...args) => ($options.onBlur && $options.onBlur(...args))),
               onKeydown: _cache[2] || (_cache[2] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args))),
               onInput: _cache[3] || (_cache[3] = (...args) => ($options.onEditableInput && $options.onEditableInput(...args)))
-            }, $props.inputProps), null, 16, _hoisted_2))
+            }, { ...$props.inputProps, ..._ctx.ptm('input') }), null, 16, _hoisted_2))
           : (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
               key: 1,
               ref: "focusInput",
@@ -8283,7 +8322,7 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
               onFocus: _cache[4] || (_cache[4] = (...args) => ($options.onFocus && $options.onFocus(...args))),
               onBlur: _cache[5] || (_cache[5] = (...args) => ($options.onBlur && $options.onBlur(...args))),
               onKeydown: _cache[6] || (_cache[6] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args)))
-            }, $props.inputProps), [
+            }, { ...$props.inputProps, ..._ctx.ptm('input') }), [
               vue.renderSlot(_ctx.$slots, "value", {
                 value: $props.modelValue,
                 placeholder: $props.placeholder
@@ -8299,38 +8338,38 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
               (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.clearIcon ? 'i' : 'TimesIcon'), vue.mergeProps({
                 class: ['p-dropdown-clear-icon', $props.clearIcon],
                 onClick: $options.onClearClick
-              }, $props.clearIconProps), null, 16, ["class", "onClick"]))
+              }, { ...$props.clearIconProps, ..._ctx.ptm('clearIcon') }), null, 16, ["class", "onClick"]))
             ])
           : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", _hoisted_4, [
+        vue.createElementVNode("div", vue.mergeProps({ class: "p-dropdown-trigger" }, _ctx.ptm('trigger')), [
           ($props.loading)
             ? vue.renderSlot(_ctx.$slots, "loadingicon", {
                 key: 0,
                 class: "p-dropdown-trigger-icon"
               }, () => [
                 ($props.loadingIcon)
-                  ? (vue.openBlock(), vue.createElementBlock("span", {
+                  ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
                       key: 0,
-                      class: vue.normalizeClass(['p-dropdown-trigger-icon pi-spin', $props.loadingIcon]),
+                      class: ['p-dropdown-trigger-icon pi-spin', $props.loadingIcon],
                       "aria-hidden": "true"
-                    }, null, 2))
-                  : (vue.openBlock(), vue.createBlock(_component_SpinnerIcon, {
+                    }, _ctx.ptm('loadingIcon')), null, 16))
+                  : (vue.openBlock(), vue.createBlock(_component_SpinnerIcon, vue.mergeProps({
                       key: 1,
                       class: "p-dropdown-trigger-icon",
                       spin: "",
                       "aria-hidden": "true"
-                    }))
+                    }, _ctx.ptm('loadingIcon')), null, 16))
               ])
             : vue.renderSlot(_ctx.$slots, "dropdownicon", {
                 key: 1,
                 class: "p-dropdown-trigger-icon"
               }, () => [
-                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.dropdownIcon ? 'span' : 'ChevronDownIcon'), {
-                  class: vue.normalizeClass(['p-dropdown-trigger-icon', $props.dropdownIcon]),
+                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.dropdownIcon ? 'span' : 'ChevronDownIcon'), vue.mergeProps({
+                  class: ['p-dropdown-trigger-icon', $props.dropdownIcon],
                   "aria-hidden": "true"
-                }, null, 8, ["class"]))
+                }, _ctx.ptm('dropdownIcon')), null, 16, ["class"]))
               ])
-        ]),
+        ], 16),
         vue.createVNode(_component_Portal, { appendTo: $props.appendTo }, {
           default: vue.withCtx(() => [
             vue.createVNode(vue.Transition, {
@@ -8349,27 +8388,30 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
                       class: $options.panelStyleClass,
                       onClick: _cache[13] || (_cache[13] = (...args) => ($options.onOverlayClick && $options.onOverlayClick(...args))),
                       onKeydown: _cache[14] || (_cache[14] = (...args) => ($options.onOverlayKeyDown && $options.onOverlayKeyDown(...args)))
-                    }, $props.panelProps), [
-                      vue.createElementVNode("span", {
+                    }, { ...$props.panelProps, ..._ctx.ptm('panel') }), [
+                      vue.createElementVNode("span", vue.mergeProps({
                         ref: "firstHiddenFocusableElementOnOverlay",
                         role: "presentation",
                         "aria-hidden": "true",
                         class: "p-hidden-accessible p-hidden-focusable",
                         tabindex: 0,
                         onFocus: _cache[7] || (_cache[7] = (...args) => ($options.onFirstHiddenFocus && $options.onFirstHiddenFocus(...args)))
-                      }, null, 544),
+                      }, _ctx.ptm('hiddenFirstFocusableEl')), null, 16),
                       vue.renderSlot(_ctx.$slots, "header", {
                         value: $props.modelValue,
                         options: $options.visibleOptions
                       }),
                       ($props.filter)
-                        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
-                            vue.createElementVNode("div", _hoisted_6, [
+                        ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                            key: 0,
+                            class: "p-dropdown-header"
+                          }, _ctx.ptm('header')), [
+                            vue.createElementVNode("div", vue.mergeProps({ class: "p-dropdown-filter-container" }, _ctx.ptm('filterContainer')), [
                               vue.createElementVNode("input", vue.mergeProps({
                                 ref: "filterInput",
                                 type: "text",
                                 value: $data.filterValue,
-                                onVnodeUpdated: _cache[8] || (_cache[8] = (...args) => ($options.onFilterUpdated && $options.onFilterUpdated(...args))),
+                                onVnodeMounted: _cache[8] || (_cache[8] = (...args) => ($options.onFilterUpdated && $options.onFilterUpdated(...args))),
                                 class: "p-dropdown-filter p-inputtext p-component",
                                 placeholder: $props.filterPlaceholder,
                                 role: "searchbox",
@@ -8379,58 +8421,62 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
                                 onKeydown: _cache[9] || (_cache[9] = (...args) => ($options.onFilterKeyDown && $options.onFilterKeyDown(...args))),
                                 onBlur: _cache[10] || (_cache[10] = (...args) => ($options.onFilterBlur && $options.onFilterBlur(...args))),
                                 onInput: _cache[11] || (_cache[11] = (...args) => ($options.onFilterChange && $options.onFilterChange(...args)))
-                              }, $props.filterInputProps), null, 16, _hoisted_7),
+                              }, { ...$props.filterInputProps, ..._ctx.ptm('filterInput') }), null, 16, _hoisted_4),
                               vue.renderSlot(_ctx.$slots, "filtericon", {}, () => [
-                                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterIcon ? 'span' : 'FilterIcon'), {
-                                  class: vue.normalizeClass(['p-dropdown-filter-icon', $props.filterIcon])
-                                }, null, 8, ["class"]))
+                                (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.filterIcon ? 'span' : 'FilterIcon'), vue.mergeProps({
+                                  class: ['p-dropdown-filter-icon', $props.filterIcon]
+                                }, _ctx.ptm('filterIcon')), null, 16, ["class"]))
                               ])
-                            ]),
-                            vue.createElementVNode("span", _hoisted_8, vue.toDisplayString($options.filterResultMessageText), 1)
-                          ]))
+                            ], 16),
+                            vue.createElementVNode("span", vue.mergeProps({
+                              role: "status",
+                              "aria-live": "polite",
+                              class: "p-hidden-accessible"
+                            }, _ctx.ptm('hiddenFilterResult')), vue.toDisplayString($options.filterResultMessageText), 17)
+                          ], 16))
                         : vue.createCommentVNode("", true),
-                      vue.createElementVNode("div", {
+                      vue.createElementVNode("div", vue.mergeProps({
                         class: "p-dropdown-items-wrapper",
-                        style: vue.normalizeStyle({ 'max-height': $options.virtualScrollerDisabled ? $props.scrollHeight : '' })
-                      }, [
-                        vue.createVNode(_component_VirtualScroller, vue.mergeProps({ ref: $options.virtualScrollerRef }, $props.virtualScrollerOptions, {
+                        style: { 'max-height': $options.virtualScrollerDisabled ? $props.scrollHeight : '' }
+                      }, _ctx.ptm('wrapper')), [
+                        vue.createVNode(_component_VirtualScroller, vue.mergeProps({ ref: $options.virtualScrollerRef }, { ...$props.virtualScrollerOptions, ..._ctx.ptm('virtualScroller') }, {
                           items: $options.visibleOptions,
                           style: { height: $props.scrollHeight },
                           tabindex: -1,
                           disabled: $options.virtualScrollerDisabled
                         }), vue.createSlots({
                           content: vue.withCtx(({ styleClass, contentRef, items, getItemOptions, contentStyle, itemSize }) => [
-                            vue.createElementVNode("ul", {
+                            vue.createElementVNode("ul", vue.mergeProps({
                               ref: (el) => $options.listRef(el, contentRef),
                               id: $data.id + '_list',
-                              class: vue.normalizeClass(['p-dropdown-items', styleClass]),
-                              style: vue.normalizeStyle(contentStyle),
+                              class: ['p-dropdown-items', styleClass],
+                              style: contentStyle,
                               role: "listbox"
-                            }, [
+                            }, _ctx.ptm('list')), [
                               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(items, (option, i) => {
                                 return (vue.openBlock(), vue.createElementBlock(vue.Fragment, {
                                   key: $options.getOptionRenderKey(option, $options.getOptionIndex(i, getItemOptions))
                                 }, [
                                   ($options.isOptionGroup(option))
-                                    ? (vue.openBlock(), vue.createElementBlock("li", {
+                                    ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
                                         key: 0,
                                         id: $data.id + '_' + $options.getOptionIndex(i, getItemOptions),
-                                        style: vue.normalizeStyle({ height: itemSize ? itemSize + 'px' : undefined }),
+                                        style: { height: itemSize ? itemSize + 'px' : undefined },
                                         class: "p-dropdown-item-group",
                                         role: "option"
-                                      }, [
+                                      }, _ctx.ptm('itemGroup')), [
                                         vue.renderSlot(_ctx.$slots, "optiongroup", {
                                           option: option.optionGroup,
                                           index: $options.getOptionIndex(i, getItemOptions)
                                         }, () => [
                                           vue.createTextVNode(vue.toDisplayString($options.getOptionGroupLabel(option.optionGroup)), 1)
                                         ])
-                                      ], 12, _hoisted_10))
-                                    : vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", {
+                                      ], 16, _hoisted_6))
+                                    : vue.withDirectives((vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
                                         key: 1,
                                         id: $data.id + '_' + $options.getOptionIndex(i, getItemOptions),
-                                        style: vue.normalizeStyle({ height: itemSize ? itemSize + 'px' : undefined }),
-                                        class: vue.normalizeClass(['p-dropdown-item', { 'p-highlight': $options.isSelected(option), 'p-focus': $data.focusedOptionIndex === $options.getOptionIndex(i, getItemOptions), 'p-disabled': $options.isOptionDisabled(option) }]),
+                                        style: { height: itemSize ? itemSize + 'px' : undefined },
+                                        class: ['p-dropdown-item', { 'p-highlight': $options.isSelected(option), 'p-focus': $data.focusedOptionIndex === $options.getOptionIndex(i, getItemOptions), 'p-disabled': $options.isOptionDisabled(option) }],
                                         role: "option",
                                         "aria-label": $options.getOptionLabel(option),
                                         "aria-selected": $options.isSelected(option),
@@ -8439,32 +8485,40 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
                                         "aria-posinset": $options.getAriaPosInset($options.getOptionIndex(i, getItemOptions)),
                                         onClick: $event => ($options.onOptionSelect($event, option)),
                                         onMousemove: $event => ($options.onOptionMouseMove($event, $options.getOptionIndex(i, getItemOptions)))
-                                      }, [
+                                      }, $options.getPTOptions(option, getItemOptions, i, 'item')), [
                                         vue.renderSlot(_ctx.$slots, "option", {
                                           option: option,
                                           index: $options.getOptionIndex(i, getItemOptions)
                                         }, () => [
                                           vue.createTextVNode(vue.toDisplayString($options.getOptionLabel(option)), 1)
                                         ])
-                                      ], 46, _hoisted_11)), [
+                                      ], 16, _hoisted_7)), [
                                         [_directive_ripple]
                                       ])
                                 ], 64))
                               }), 128)),
                               ($data.filterValue && (!items || (items && items.length === 0)))
-                                ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_12, [
+                                ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
+                                    key: 0,
+                                    class: "p-dropdown-empty-message",
+                                    role: "option"
+                                  }, _ctx.ptm('emptyMessage')), [
                                     vue.renderSlot(_ctx.$slots, "emptyfilter", {}, () => [
                                       vue.createTextVNode(vue.toDisplayString($options.emptyFilterMessageText), 1)
                                     ])
-                                  ]))
+                                  ], 16))
                                 : (!$props.options || ($props.options && $props.options.length === 0))
-                                  ? (vue.openBlock(), vue.createElementBlock("li", _hoisted_13, [
+                                  ? (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
+                                      key: 1,
+                                      class: "p-dropdown-empty-message",
+                                      role: "option"
+                                    }, _ctx.ptm('emptyMessage')), [
                                       vue.renderSlot(_ctx.$slots, "empty", {}, () => [
                                         vue.createTextVNode(vue.toDisplayString($options.emptyMessageText), 1)
                                       ])
-                                    ]))
+                                    ], 16))
                                   : vue.createCommentVNode("", true)
-                            ], 14, _hoisted_9)
+                            ], 16, _hoisted_5)
                           ]),
                           _: 2
                         }, [
@@ -8478,23 +8532,32 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
                               }
                             : undefined
                         ]), 1040, ["items", "style", "disabled"])
-                      ], 4),
+                      ], 16),
                       vue.renderSlot(_ctx.$slots, "footer", {
                         value: $props.modelValue,
                         options: $options.visibleOptions
                       }),
                       (!$props.options || ($props.options && $props.options.length === 0))
-                        ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_14, vue.toDisplayString($options.emptyMessageText), 1))
+                        ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                            key: 1,
+                            role: "status",
+                            "aria-live": "polite",
+                            class: "p-hidden-accessible"
+                          }, _ctx.ptm('emptyMessage')), vue.toDisplayString($options.emptyMessageText), 17))
                         : vue.createCommentVNode("", true),
-                      vue.createElementVNode("span", _hoisted_15, vue.toDisplayString($options.selectedMessageText), 1),
-                      vue.createElementVNode("span", {
+                      vue.createElementVNode("span", vue.mergeProps({
+                        role: "status",
+                        "aria-live": "polite",
+                        class: "p-hidden-accessible"
+                      }, _ctx.ptm('hiddenSelectedMessage')), vue.toDisplayString($options.selectedMessageText), 17),
+                      vue.createElementVNode("span", vue.mergeProps({
                         ref: "lastHiddenFocusableElementOnOverlay",
                         role: "presentation",
                         "aria-hidden": "true",
                         class: "p-hidden-accessible p-hidden-focusable",
                         tabindex: 0,
                         onFocus: _cache[12] || (_cache[12] = (...args) => ($options.onLastHiddenFocus && $options.onLastHiddenFocus(...args)))
-                      }, null, 544)
+                      }, _ctx.ptm('hiddenLastFocusableEl')), null, 16)
                     ], 16))
                   : vue.createCommentVNode("", true)
               ]),
@@ -8503,7 +8566,7 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
           ]),
           _: 3
         }, 8, ["appendTo"])
-      ], 10, _hoisted_1))
+      ], 16, _hoisted_1))
     }
 
     function styleInject(css, ref) {
@@ -8540,14 +8603,15 @@ this.primevue.dropdown = (function (api, ChevronDownIcon, FilterIcon, SpinnerIco
 
     return script;
 
-})(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);
+})(primevue.api, primevue.basecomponent, 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 +8621,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 +9088,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"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_Portal = vue.resolveComponent("Portal");
@@ -9035,12 +9099,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 +9123,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 +9150,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),
@@ -9105,36 +9167,36 @@ this.primevue.dialog = (function (FocusTrap, TimesIcon, WindowMaximizeIcon, Wind
                                         onClick: _cache[1] || (_cache[1] = (...args) => ($options.close && $options.close(...args))),
                                         "aria-label": $options.closeAriaLabel,
                                         type: "button"
-                                      }, $props.closeButtonProps), [
+                                      }, { ...$props.closeButtonProps, ..._ctx.ptm('closeButton') }), [
                                         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('closeButtonIcon')), 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 +9205,7 @@ this.primevue.dialog = (function (FocusTrap, TimesIcon, WindowMaximizeIcon, Wind
                   ]),
                   _: 3
                 }, 8, ["onBeforeEnter", "onEnter", "onBeforeLeave", "onLeave", "onAfterLeave"])
-              ], 2))
+              ], 16))
             : vue.createCommentVNode("", true)
         ]),
         _: 3
@@ -9184,14 +9246,15 @@ 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) {
+this.primevue.paginator = (function (BaseComponent, utils, vue, AngleDoubleLeftIcon, Ripple, Dropdown, InputNumber, AngleDoubleRightIcon, AngleRightIcon, AngleLeftIcon) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+    var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
     var AngleDoubleLeftIcon__default = /*#__PURE__*/_interopDefaultLegacy(AngleDoubleLeftIcon);
     var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
     var Dropdown__default = /*#__PURE__*/_interopDefaultLegacy(Dropdown);
@@ -9202,6 +9265,7 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
 
     var script$9 = {
         name: 'CurrentPageReport',
+        extends: BaseComponent__default["default"],
         props: {
             pageCount: {
                 type: Number,
@@ -9247,22 +9311,30 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
         }
     };
 
-    const _hoisted_1$2 = { class: "p-paginator-current" };
-
     function render$9(_ctx, _cache, $props, $setup, $data, $options) {
-      return (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$2, vue.toDisplayString($options.text), 1))
+      return (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({ class: "p-paginator-current" }, _ctx.ptm('current')), vue.toDisplayString($options.text), 17))
     }
 
     script$9.render = render$9;
 
     var script$8 = {
         name: 'FirstPageLink',
+        extends: BaseComponent__default["default"],
         props: {
             template: {
                 type: Function,
                 default: null
             }
         },
+        methods: {
+            getPTOptions(key) {
+                return this.ptm(key, {
+                    context: {
+                        disabled: this.$attrs.disabled
+                    }
+                });
+            }
+        },
         computed: {
             containerClass() {
                 return [
@@ -9284,12 +9356,12 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
     function render$8(_ctx, _cache, $props, $setup, $data, $options) {
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
-        class: vue.normalizeClass($options.containerClass),
+      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
+        class: $options.containerClass,
         type: "button"
-      }, [
-        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template || 'AngleDoubleLeftIcon'), { class: "p-paginator-icon" }))
-      ], 2)), [
+      }, $options.getPTOptions('firstPageButton')), [
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template || 'AngleDoubleLeftIcon'), vue.mergeProps({ class: "p-paginator-icon" }, $options.getPTOptions('firstPageIcon')), null, 16))
+      ], 16)), [
         [_directive_ripple]
       ])
     }
@@ -9298,6 +9370,7 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
 
     var script$7 = {
         name: 'JumpToPageDropdown',
+        extends: BaseComponent__default["default"],
         emits: ['page-change'],
         props: {
             page: Number,
@@ -9335,14 +9408,16 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
         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"]))
+        disabled: $props.disabled,
+        pt: _ctx.ptm('JTPDropdown')
+      }, null, 8, ["modelValue", "options", "disabled", "pt"]))
     }
 
     script$7.render = render$7;
 
     var script$6 = {
         name: 'JumpToPageInput',
+        extends: BaseComponent__default["default"],
         inheritAttrs: false,
         emits: ['page-change'],
         props: {
@@ -9387,20 +9462,31 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
         class: "p-paginator-page-input",
         "aria-label": $options.inputArialabel,
         disabled: $props.disabled,
-        "onUpdate:modelValue": $options.onChange
-      }, null, 8, ["modelValue", "aria-label", "disabled", "onUpdate:modelValue"]))
+        "onUpdate:modelValue": $options.onChange,
+        pt: _ctx.ptm('JTPInput')
+      }, null, 8, ["modelValue", "aria-label", "disabled", "onUpdate:modelValue", "pt"]))
     }
 
     script$6.render = render$6;
 
     var script$5 = {
         name: 'LastPageLink',
+        extends: BaseComponent__default["default"],
         props: {
             template: {
                 type: Function,
                 default: null
             }
         },
+        methods: {
+            getPTOptions(key) {
+                return this.ptm(key, {
+                    context: {
+                        disabled: this.$attrs.disabled
+                    }
+                });
+            }
+        },
         computed: {
             containerClass() {
                 return [
@@ -9422,12 +9508,12 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
     function render$5(_ctx, _cache, $props, $setup, $data, $options) {
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
-        class: vue.normalizeClass($options.containerClass),
+      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
+        class: $options.containerClass,
         type: "button"
-      }, [
-        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template || 'AngleDoubleRightIcon'), { class: "p-paginator-icon" }))
-      ], 2)), [
+      }, $options.getPTOptions('lastPageButton')), [
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template || 'AngleDoubleRightIcon'), vue.mergeProps({ class: "p-paginator-icon" }, $options.getPTOptions('lastPageIcon')), null, 16))
+      ], 16)), [
         [_directive_ripple]
       ])
     }
@@ -9436,12 +9522,22 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
 
     var script$4 = {
         name: 'NextPageLink',
+        extends: BaseComponent__default["default"],
         props: {
             template: {
                 type: Function,
                 default: null
             }
         },
+        methods: {
+            getPTOptions(key) {
+                return this.ptm(key, {
+                    context: {
+                        disabled: this.$attrs.disabled
+                    }
+                });
+            }
+        },
         computed: {
             containerClass() {
                 return [
@@ -9463,12 +9559,12 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
     function render$4(_ctx, _cache, $props, $setup, $data, $options) {
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
-        class: vue.normalizeClass($options.containerClass),
+      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
+        class: $options.containerClass,
         type: "button"
-      }, [
-        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template || 'AngleRightIcon'), { class: "p-paginator-icon" }))
-      ], 2)), [
+      }, $options.getPTOptions('nextPageButton')), [
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template || 'AngleRightIcon'), vue.mergeProps({ class: "p-paginator-icon" }, $options.getPTOptions('nextPageIcon')), null, 16))
+      ], 16)), [
         [_directive_ripple]
       ])
     }
@@ -9477,6 +9573,7 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
 
     var script$3 = {
         name: 'PageLinks',
+        extends: BaseComponent__default["default"],
         inheritAttrs: false,
         emits: ['click'],
         props: {
@@ -9484,6 +9581,13 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
             page: Number
         },
         methods: {
+            getPTOptions(pageLink, key) {
+                return this.ptm(key, {
+                    context: {
+                        active: pageLink === this.page
+                    }
+                });
+            },
             onPageLinkClick(event, pageLink) {
                 this.$emit('click', {
                     originalEvent: event,
@@ -9494,46 +9598,54 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
                 return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.pageLabel.replace(/{page}/g, value) : undefined;
             }
         },
-        computed: {},
         directives: {
             ripple: Ripple__default["default"]
         }
     };
 
-    const _hoisted_1$1 = { class: "p-paginator-pages" };
-    const _hoisted_2$1 = ["aria-label", "aria-current", "onClick"];
+    const _hoisted_1 = ["aria-label", "aria-current", "onClick"];
 
     function render$3(_ctx, _cache, $props, $setup, $data, $options) {
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return (vue.openBlock(), vue.createElementBlock("span", _hoisted_1$1, [
+      return (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({ class: "p-paginator-pages" }, _ctx.ptm('pages')), [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.value, (pageLink) => {
-          return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+          return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
             key: pageLink,
-            class: vue.normalizeClass(['p-paginator-page p-paginator-element p-link', { 'p-highlight': pageLink - 1 === $props.page }]),
+            class: ['p-paginator-page p-paginator-element p-link', { 'p-highlight': pageLink - 1 === $props.page }],
             type: "button",
             "aria-label": $options.ariaPageLabel(pageLink),
             "aria-current": pageLink - 1 === $props.page ? 'page' : undefined,
             onClick: $event => ($options.onPageLinkClick($event, pageLink))
-          }, [
+          }, $options.getPTOptions(pageLink - 1, 'pageButton')), [
             vue.createTextVNode(vue.toDisplayString(pageLink), 1)
-          ], 10, _hoisted_2$1)), [
+          ], 16, _hoisted_1)), [
             [_directive_ripple]
           ])
         }), 128))
-      ]))
+      ], 16))
     }
 
     script$3.render = render$3;
 
     var script$2 = {
         name: 'PrevPageLink',
+        extends: BaseComponent__default["default"],
         props: {
             template: {
                 type: Function,
                 default: null
             }
         },
+        methods: {
+            getPTOptions(key) {
+                return this.ptm(key, {
+                    context: {
+                        disabled: this.$attrs.disabled
+                    }
+                });
+            }
+        },
         computed: {
             containerClass() {
                 return [
@@ -9555,12 +9667,12 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
     function render$2(_ctx, _cache, $props, $setup, $data, $options) {
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
-        class: vue.normalizeClass($options.containerClass),
+      return vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
+        class: $options.containerClass,
         type: "button"
-      }, [
-        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template || 'AngleLeftIcon'), { class: "p-paginator-icon" }))
-      ], 2)), [
+      }, $options.getPTOptions('prevPageButton')), [
+        (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template || 'AngleLeftIcon'), vue.mergeProps({ class: "p-paginator-icon" }, $options.getPTOptions('prevPageIcon')), null, 16))
+      ], 16)), [
         [_directive_ripple]
       ])
     }
@@ -9569,6 +9681,7 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
 
     var script$1 = {
         name: 'RowsPerPageDropdown',
+        extends: BaseComponent__default["default"],
         emits: ['rows-change'],
         props: {
             options: Array,
@@ -9608,14 +9721,16 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
         optionValue: "value",
         "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => ($options.onChange($event))),
         class: "p-paginator-rpp-options",
-        disabled: $props.disabled
-      }, null, 8, ["modelValue", "options", "disabled"]))
+        disabled: $props.disabled,
+        pt: _ctx.ptm('RPPDropdown')
+      }, null, 8, ["modelValue", "options", "disabled", "pt"]))
     }
 
     script$1.render = render$1;
 
     var script = {
         name: 'Paginator',
+        extends: BaseComponent__default["default"],
         emits: ['update:first', 'update:rows', 'page'],
         props: {
             totalRecords: {
@@ -9888,16 +10003,6 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
         }
     };
 
-    const _hoisted_1 = { key: 0 };
-    const _hoisted_2 = {
-      key: 0,
-      class: "p-paginator-left-content"
-    };
-    const _hoisted_3 = {
-      key: 1,
-      class: "p-paginator-right-content"
-    };
-
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_FirstPageLink = vue.resolveComponent("FirstPageLink");
       const _component_PrevPageLink = vue.resolveComponent("PrevPageLink");
@@ -9910,18 +10015,21 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
       const _component_JumpToPageInput = vue.resolveComponent("JumpToPageInput");
 
       return ($props.alwaysShow ? true : $options.pageLinks && $options.pageLinks.length > 1)
-        ? (vue.openBlock(), vue.createElementBlock("nav", _hoisted_1, [
+        ? (vue.openBlock(), vue.createElementBlock("nav", vue.normalizeProps(vue.mergeProps({ key: 0 }, _ctx.ptm('root'))), [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.templateItems, (value, key) => {
-              return (vue.openBlock(), vue.createElementBlock("div", {
+              return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                 key: key,
                 ref_for: true,
                 ref: "paginator",
-                class: vue.normalizeClass(["p-paginator p-component", $options.getPaginatorClasses(key)])
-              }, [
+                class: ["p-paginator p-component", $options.getPaginatorClasses(key)]
+              }, _ctx.ptm('paginator')), [
                 (_ctx.$slots.start)
-                  ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+                  ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                      key: 0,
+                      class: "p-paginator-left-content"
+                    }, _ctx.ptm('left')), [
                       vue.renderSlot(_ctx.$slots, "start", { state: $options.currentState })
-                    ]))
+                    ], 16))
                   : vue.createCommentVNode("", true),
                 (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(value, (item) => {
                   return (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: item }, [
@@ -9931,40 +10039,45 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
                           "aria-label": $options.getAriaLabel('firstPageLabel'),
                           template: _ctx.$slots.firstpagelinkicon,
                           onClick: _cache[0] || (_cache[0] = $event => ($options.changePageToFirst($event))),
-                          disabled: $options.isFirstPage || $options.empty
-                        }, null, 8, ["aria-label", "template", "disabled"]))
+                          disabled: $options.isFirstPage || $options.empty,
+                          pt: _ctx.pt
+                        }, null, 8, ["aria-label", "template", "disabled", "pt"]))
                       : (item === 'PrevPageLink')
                         ? (vue.openBlock(), vue.createBlock(_component_PrevPageLink, {
                             key: 1,
                             "aria-label": $options.getAriaLabel('prevPageLabel'),
                             template: _ctx.$slots.prevpagelinkicon,
                             onClick: _cache[1] || (_cache[1] = $event => ($options.changePageToPrev($event))),
-                            disabled: $options.isFirstPage || $options.empty
-                          }, null, 8, ["aria-label", "template", "disabled"]))
+                            disabled: $options.isFirstPage || $options.empty,
+                            pt: _ctx.pt
+                          }, null, 8, ["aria-label", "template", "disabled", "pt"]))
                         : (item === 'NextPageLink')
                           ? (vue.openBlock(), vue.createBlock(_component_NextPageLink, {
                               key: 2,
                               "aria-label": $options.getAriaLabel('nextPageLabel'),
                               template: _ctx.$slots.nextpagelinkicon,
                               onClick: _cache[2] || (_cache[2] = $event => ($options.changePageToNext($event))),
-                              disabled: $options.isLastPage || $options.empty
-                            }, null, 8, ["aria-label", "template", "disabled"]))
+                              disabled: $options.isLastPage || $options.empty,
+                              pt: _ctx.pt
+                            }, null, 8, ["aria-label", "template", "disabled", "pt"]))
                           : (item === 'LastPageLink')
                             ? (vue.openBlock(), vue.createBlock(_component_LastPageLink, {
                                 key: 3,
                                 "aria-label": $options.getAriaLabel('lastPageLabel'),
                                 template: _ctx.$slots.lastpagelinkicon,
                                 onClick: _cache[3] || (_cache[3] = $event => ($options.changePageToLast($event))),
-                                disabled: $options.isLastPage || $options.empty
-                              }, null, 8, ["aria-label", "template", "disabled"]))
+                                disabled: $options.isLastPage || $options.empty,
+                                pt: _ctx.pt
+                              }, null, 8, ["aria-label", "template", "disabled", "pt"]))
                             : (item === 'PageLinks')
                               ? (vue.openBlock(), vue.createBlock(_component_PageLinks, {
                                   key: 4,
                                   "aria-label": $options.getAriaLabel('pageLabel'),
                                   value: $options.pageLinks,
                                   page: $options.page,
-                                  onClick: _cache[4] || (_cache[4] = $event => ($options.changePageLink($event)))
-                                }, null, 8, ["aria-label", "value", "page"]))
+                                  onClick: _cache[4] || (_cache[4] = $event => ($options.changePageLink($event))),
+                                  pt: _ctx.pt
+                                }, null, 8, ["aria-label", "value", "page", "pt"]))
                               : (item === 'CurrentPageReport')
                                 ? (vue.openBlock(), vue.createBlock(_component_CurrentPageReport, {
                                     key: 5,
@@ -9975,8 +10088,9 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
                                     pageCount: $options.pageCount,
                                     first: $data.d_first,
                                     rows: $data.d_rows,
-                                    totalRecords: $props.totalRecords
-                                  }, null, 8, ["template", "currentPage", "page", "pageCount", "first", "rows", "totalRecords"]))
+                                    totalRecords: $props.totalRecords,
+                                    pt: _ctx.pt
+                                  }, null, 8, ["template", "currentPage", "page", "pageCount", "first", "rows", "totalRecords", "pt"]))
                                 : (item === 'RowsPerPageDropdown' && $props.rowsPerPageOptions)
                                   ? (vue.openBlock(), vue.createBlock(_component_RowsPerPageDropdown, {
                                       key: 6,
@@ -9984,8 +10098,9 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
                                       rows: $data.d_rows,
                                       options: $props.rowsPerPageOptions,
                                       onRowsChange: _cache[5] || (_cache[5] = $event => ($options.onRowChange($event))),
-                                      disabled: $options.empty
-                                    }, null, 8, ["aria-label", "rows", "options", "disabled"]))
+                                      disabled: $options.empty,
+                                      pt: _ctx.pt
+                                    }, null, 8, ["aria-label", "rows", "options", "disabled", "pt"]))
                                   : (item === 'JumpToPageDropdown')
                                     ? (vue.openBlock(), vue.createBlock(_component_JumpToPageDropdown, {
                                         key: 7,
@@ -9993,26 +10108,31 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
                                         page: $options.page,
                                         pageCount: $options.pageCount,
                                         onPageChange: _cache[6] || (_cache[6] = $event => ($options.changePage($event))),
-                                        disabled: $options.empty
-                                      }, null, 8, ["aria-label", "page", "pageCount", "disabled"]))
+                                        disabled: $options.empty,
+                                        pt: _ctx.pt
+                                      }, null, 8, ["aria-label", "page", "pageCount", "disabled", "pt"]))
                                     : (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"]))
+                                          disabled: $options.empty,
+                                          pt: _ctx.pt
+                                        }, null, 8, ["page", "disabled", "pt"]))
                                       : vue.createCommentVNode("", true)
                   ], 64))
                 }), 128)),
                 (_ctx.$slots.end)
-                  ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+                  ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                      key: 1,
+                      class: "p-paginator-right-content"
+                    }, _ctx.ptm('end')), [
                       vue.renderSlot(_ctx.$slots, "end", { state: $options.currentState })
-                    ]))
+                    ], 16))
                   : vue.createCommentVNode("", true)
-              ], 2))
+              ], 16))
             }), 128))
-          ]))
+          ], 16))
         : vue.createCommentVNode("", true)
     }
 
@@ -10050,14 +10170,15 @@ this.primevue.paginator = (function (utils, vue, AngleDoubleLeftIcon, Ripple, Dr
 
     return script;
 
-})(primevue.utils, Vue, primevue.icons.angledoubleleft, primevue.ripple, primevue.dropdown, primevue.inputnumber, primevue.icons.angledoubleright, primevue.icons.angleright, primevue.icons.angleleft);
+})(primevue.basecomponent, primevue.utils, Vue, primevue.icons.angledoubleleft, primevue.ripple, primevue.dropdown, primevue.inputnumber, primevue.icons.angledoubleright, primevue.icons.angleright, primevue.icons.angleleft);
 
 this.primevue = this.primevue || {};
-this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, CheckIcon, ChevronDownIcon, ChevronRightIcon, MinusIcon, Ripple, vue) {
+this.primevue.tree = (function (BaseComponent, SearchIcon, SpinnerIcon, utils, CheckIcon, ChevronDownIcon, ChevronRightIcon, MinusIcon, 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 SearchIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchIcon);
     var SpinnerIcon__default = /*#__PURE__*/_interopDefaultLegacy(SpinnerIcon);
     var CheckIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckIcon);
@@ -10068,6 +10189,7 @@ this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, CheckIcon, Chevr
 
     var script$1 = {
         name: 'TreeNode',
+        extends: BaseComponent__default["default"],
         emits: ['node-toggle', 'node-click', 'checkbox-change'],
         props: {
             node: {
@@ -10119,6 +10241,15 @@ this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, CheckIcon, Chevr
             onChildNodeToggle(node) {
                 this.$emit('node-toggle', node);
             },
+            getPTOptions(key) {
+                return this.ptm(key, {
+                    context: {
+                        expanded: this.expanded,
+                        selected: this.selected,
+                        checked: this.checked
+                    }
+                });
+            },
             onClick(event) {
                 if (this.toggleClicked || utils.DomHandler.hasClass(event.target, 'p-tree-toggler') || utils.DomHandler.hasClass(event.target.parentElement, 'p-tree-toggler')) {
                     this.toggleClicked = false;
@@ -10456,25 +10587,14 @@ this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, CheckIcon, Chevr
     };
 
     const _hoisted_1$1 = ["aria-label", "aria-selected", "aria-expanded", "aria-setsize", "aria-posinset", "aria-level", "aria-checked", "tabindex"];
-    const _hoisted_2$1 = {
-      key: 0,
-      class: "p-checkbox p-component",
-      "aria-hidden": "true"
-    };
-    const _hoisted_3$1 = { class: "p-treenode-label" };
-    const _hoisted_4$1 = {
-      key: 0,
-      class: "p-treenode-children",
-      role: "group"
-    };
 
     function render$1(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_TreeNode = vue.resolveComponent("TreeNode", true);
       const _directive_ripple = vue.resolveDirective("ripple");
 
-      return (vue.openBlock(), vue.createElementBlock("li", {
+      return (vue.openBlock(), vue.createElementBlock("li", vue.mergeProps({
         ref: "currentNode",
-        class: vue.normalizeClass($options.containerClass),
+        class: $options.containerClass,
         role: "treeitem",
         "aria-label": $options.label($props.node),
         "aria-selected": $options.ariaSelected,
@@ -10485,20 +10605,20 @@ this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, CheckIcon, Chevr
         "aria-checked": $options.ariaChecked,
         tabindex: $props.index === 0 ? 0 : -1,
         onKeydown: _cache[3] || (_cache[3] = (...args) => ($options.onKeyDown && $options.onKeyDown(...args)))
-      }, [
-        vue.createElementVNode("div", {
-          class: vue.normalizeClass($options.contentClass),
+      }, $options.getPTOptions('node')), [
+        vue.createElementVNode("div", vue.mergeProps({
+          class: $options.contentClass,
           onClick: _cache[1] || (_cache[1] = (...args) => ($options.onClick && $options.onClick(...args))),
           onTouchend: _cache[2] || (_cache[2] = (...args) => ($options.onTouchEnd && $options.onTouchEnd(...args))),
-          style: vue.normalizeStyle($props.node.style)
-        }, [
-          vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
+          style: $props.node.style
+        }, $options.getPTOptions('content')), [
+          vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
             type: "button",
             class: "p-tree-toggler p-link",
             onClick: _cache[0] || (_cache[0] = (...args) => ($options.toggle && $options.toggle(...args))),
             tabindex: "-1",
             "aria-hidden": "true"
-          }, [
+          }, $options.getPTOptions('toggler')), [
             ($props.templates['togglericon'])
               ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['togglericon']), {
                   key: 0,
@@ -10507,23 +10627,27 @@ this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, CheckIcon, Chevr
                   class: "p-tree-toggler-icon"
                 }, null, 8, ["node", "expanded"]))
               : ($options.expanded)
-                ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.node.expandedIcon ? 'span' : 'ChevronDownIcon'), {
+                ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.node.expandedIcon ? 'span' : 'ChevronDownIcon'), vue.mergeProps({
                     key: 1,
                     class: "p-tree-toggler-icon"
-                  }))
-                : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.node.collapsedIcon ? 'span' : 'ChevronRightIcon'), {
+                  }, $options.getPTOptions('togglerIcon')), null, 16))
+                : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.node.collapsedIcon ? 'span' : 'ChevronRightIcon'), vue.mergeProps({
                     key: 2,
                     class: "p-tree-toggler-icon"
-                  }))
-          ])), [
+                  }, $options.getPTOptions('togglerIcon')), null, 16))
+          ], 16)), [
             [_directive_ripple]
           ]),
           ($options.checkboxMode)
-            ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$1, [
-                vue.createElementVNode("div", {
-                  class: vue.normalizeClass($options.checkboxClass),
+            ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                key: 0,
+                class: "p-checkbox p-component",
+                "aria-hidden": "true"
+              }, $options.getPTOptions('checkboxContainer')), [
+                vue.createElementVNode("div", vue.mergeProps({
+                  class: $options.checkboxClass,
                   role: "checkbox"
-                }, [
+                }, $options.getPTOptions('checkbox')), [
                   ($props.templates['checkboxicon'])
                     ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates['checkboxicon']), {
                         key: 0,
@@ -10531,17 +10655,15 @@ this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, CheckIcon, Chevr
                         partialChecked: $options.partialChecked,
                         class: "p-checkbox-icon"
                       }, null, 8, ["checked", "partialChecked"]))
-                    : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.checked ? 'CheckIcon' : $options.partialChecked ? 'MinusIcon' : null), {
+                    : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.checked ? 'CheckIcon' : $options.partialChecked ? 'MinusIcon' : null), vue.mergeProps({
                         key: 1,
                         class: "p-checkbox-icon"
-                      }))
-                ], 2)
-              ]))
+                      }, $options.getPTOptions('checkboxIcon')), null, 16))
+                ], 16)
+              ], 16))
             : vue.createCommentVNode("", true),
-          vue.createElementVNode("span", {
-            class: vue.normalizeClass($options.icon)
-          }, null, 2),
-          vue.createElementVNode("span", _hoisted_3$1, [
+          vue.createElementVNode("span", vue.mergeProps({ class: $options.icon }, $options.getPTOptions('nodeIcon')), null, 16),
+          vue.createElementVNode("span", vue.mergeProps({ class: "p-treenode-label" }, $options.getPTOptions('label')), [
             ($props.templates[$props.node.type] || $props.templates['default'])
               ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates[$props.node.type] || $props.templates['default']), {
                   key: 0,
@@ -10550,10 +10672,14 @@ this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, CheckIcon, Chevr
               : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
                   vue.createTextVNode(vue.toDisplayString($options.label($props.node)), 1)
                 ], 64))
-          ])
-        ], 38),
+          ], 16)
+        ], 16),
         ($options.hasChildren && $options.expanded)
-          ? (vue.openBlock(), vue.createElementBlock("ul", _hoisted_4$1, [
+          ? (vue.openBlock(), vue.createElementBlock("ul", vue.mergeProps({
+              key: 0,
+              class: "p-treenode-children",
+              role: "group"
+            }, _ctx.ptm('subgroup')), [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.node.children, (childNode) => {
                 return (vue.openBlock(), vue.createBlock(_component_TreeNode, {
                   key: childNode.key,
@@ -10565,18 +10691,20 @@ this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, CheckIcon, Chevr
                   onNodeClick: $options.onChildNodeClick,
                   selectionMode: $props.selectionMode,
                   selectionKeys: $props.selectionKeys,
-                  onCheckboxChange: $options.propagateUp
-                }, null, 8, ["node", "templates", "level", "expandedKeys", "onNodeToggle", "onNodeClick", "selectionMode", "selectionKeys", "onCheckboxChange"]))
+                  onCheckboxChange: $options.propagateUp,
+                  pt: _ctx.pt
+                }, null, 8, ["node", "templates", "level", "expandedKeys", "onNodeToggle", "onNodeClick", "selectionMode", "selectionKeys", "onCheckboxChange", "pt"]))
               }), 128))
-            ]))
+            ], 16))
           : vue.createCommentVNode("", true)
-      ], 42, _hoisted_1$1))
+      ], 16, _hoisted_1$1))
     }
 
     script$1.render = render$1;
 
     var script = {
         name: 'Tree',
+        extends: BaseComponent__default["default"],
         emits: ['node-expand', 'node-collapse', 'update:expandedKeys', 'update:selectionKeys', 'node-select', 'node-unselect'],
         props: {
             value: {
@@ -10848,68 +10976,64 @@ this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, CheckIcon, Chevr
         }
     };
 
-    const _hoisted_1 = {
-      key: 0,
-      class: "p-tree-loading-overlay p-component-overlay"
-    };
-    const _hoisted_2 = {
-      key: 1,
-      class: "p-tree-filter-container"
-    };
-    const _hoisted_3 = ["placeholder"];
-    const _hoisted_4 = ["aria-labelledby", "aria-label"];
+    const _hoisted_1 = ["placeholder"];
+    const _hoisted_2 = ["aria-labelledby", "aria-label"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_SpinnerIcon = vue.resolveComponent("SpinnerIcon");
       const _component_SearchIcon = vue.resolveComponent("SearchIcon");
       const _component_TreeNode = vue.resolveComponent("TreeNode");
 
-      return (vue.openBlock(), vue.createElementBlock("div", {
-        class: vue.normalizeClass($options.containerClass)
-      }, [
+      return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({ class: $options.containerClass }, _ctx.ptm('root')), [
         ($props.loading)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+              key: 0,
+              class: "p-tree-loading-overlay p-component-overlay"
+            }, _ctx.ptm('loadingOverlay')), [
               vue.renderSlot(_ctx.$slots, "loadingicon", {}, () => [
                 ($props.loadingIcon)
-                  ? (vue.openBlock(), vue.createElementBlock("i", {
+                  ? (vue.openBlock(), vue.createElementBlock("i", vue.mergeProps({
                       key: 0,
-                      class: vue.normalizeClass(['p-tree-loading-icon pi-spin', $props.loadingIcon])
-                    }, null, 2))
-                  : (vue.openBlock(), vue.createBlock(_component_SpinnerIcon, {
+                      class: ['p-tree-loading-icon pi-spin', $props.loadingIcon]
+                    }, _ctx.ptm('loadingIcon')), null, 16))
+                  : (vue.openBlock(), vue.createBlock(_component_SpinnerIcon, vue.mergeProps({
                       key: 1,
                       spin: "",
                       class: "p-tree-loading-icon"
-                    }))
+                    }, _ctx.ptm('loadingIcon')), null, 16))
               ])
-            ]))
+            ], 16))
           : vue.createCommentVNode("", true),
         ($props.filter)
-          ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
-              vue.withDirectives(vue.createElementVNode("input", {
+          ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+              key: 1,
+              class: "p-tree-filter-container"
+            }, _ctx.ptm('filterContainer')), [
+              vue.withDirectives(vue.createElementVNode("input", vue.mergeProps({
                 "onUpdate:modelValue": _cache[0] || (_cache[0] = $event => (($data.filterValue) = $event)),
                 type: "text",
                 autocomplete: "off",
                 class: "p-tree-filter p-inputtext p-component",
                 placeholder: $props.filterPlaceholder,
                 onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onFilterKeydown && $options.onFilterKeydown(...args)))
-              }, null, 40, _hoisted_3), [
+              }, _ctx.ptm('input')), null, 16, _hoisted_1), [
                 [vue.vModelText, $data.filterValue]
               ]),
               vue.renderSlot(_ctx.$slots, "searchicon", {}, () => [
-                vue.createVNode(_component_SearchIcon, { class: "p-tree-filter-icon" })
+                vue.createVNode(_component_SearchIcon, vue.mergeProps({ class: "p-tree-filter-icon" }, _ctx.ptm('searchIcon')), null, 16)
               ])
-            ]))
+            ], 16))
           : vue.createCommentVNode("", true),
-        vue.createElementVNode("div", {
+        vue.createElementVNode("div", vue.mergeProps({
           class: "p-tree-wrapper",
-          style: vue.normalizeStyle({ maxHeight: $props.scrollHeight })
-        }, [
-          vue.createElementVNode("ul", {
+          style: { maxHeight: $props.scrollHeight }
+        }, _ctx.ptm('wrapper')), [
+          vue.createElementVNode("ul", vue.mergeProps({
             class: "p-tree-container",
             role: "tree",
             "aria-labelledby": _ctx.ariaLabelledby,
             "aria-label": _ctx.ariaLabel
-          }, [
+          }, _ctx.ptm('container')), [
             (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.valueToRender, (node, index) => {
               return (vue.openBlock(), vue.createBlock(_component_TreeNode, {
                 key: node.key,
@@ -10922,12 +11046,13 @@ this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, CheckIcon, Chevr
                 onNodeClick: $options.onNodeClick,
                 selectionMode: $props.selectionMode,
                 selectionKeys: $props.selectionKeys,
-                onCheckboxChange: $options.onCheckboxChange
-              }, null, 8, ["node", "templates", "level", "index", "expandedKeys", "onNodeToggle", "onNodeClick", "selectionMode", "selectionKeys", "onCheckboxChange"]))
+                onCheckboxChange: $options.onCheckboxChange,
+                pt: _ctx.pt
+              }, null, 8, ["node", "templates", "level", "index", "expandedKeys", "onNodeToggle", "onNodeClick", "selectionMode", "selectionKeys", "onCheckboxChange", "pt"]))
             }), 128))
-          ], 8, _hoisted_4)
-        ], 4)
-      ], 2))
+          ], 16, _hoisted_2)
+        ], 16)
+      ], 16))
     }
 
     function styleInject(css, ref) {
@@ -10964,20 +11089,22 @@ this.primevue.tree = (function (SearchIcon, SpinnerIcon, utils, CheckIcon, Chevr
 
     return script;
 
-})(primevue.icons.search, primevue.icons.spinner, primevue.utils, primevue.icons.check, primevue.icons.chevrondown, primevue.icons.chevronright, primevue.icons.minus, primevue.ripple, Vue);
+})(primevue.basecomponent, 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 +11118,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 +11171,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 +11200,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 +11214,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 +11241,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 +11255,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 +11264,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 +11628,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 +11652,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 +11675,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 +11683,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 +11706,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 +11734,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 +11792,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 +11808,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 +11853,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 +11930,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 +11939,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 +11958,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 +11973,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 +11987,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 +12014,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 +12042,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 +12056,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 +12718,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 +12737,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 +12788,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 +12838,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);