primevue 3.26.1 → 3.28.0

package/menubar/Menubar.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :ref="containerRef" :class="containerClass">
-        <div v-if="$slots.start" class="p-menubar-start">
+    <div :ref="containerRef" :class="containerClass" v-bind="ptm('root')">
+        <div v-if="$slots.start" class="p-menubar-start" v-bind="ptm('start')">
             <slot name="start"></slot>
         </div>
         <a
@@ -15,9 +15,11 @@
             :aria-label="$primevue.config.locale.aria.navigation"
             @click="menuButtonClick($event)"
             @keydown="menuButtonKeydown($event)"
-            v-bind="buttonProps"
+            v-bind="{ ...buttonProps, ...ptm('button') }"
         >
-            <i class="pi pi-bars" />
+            <slot name="popupicon">
+                <BarsIcon v-bind="ptm('popupIcon')" />
+            </slot>
         </a>
         <MenubarSub
             :ref="menubarRef"
@@ -25,7 +27,7 @@
             class="p-menubar-root-list"
             role="menubar"
             :items="processedItems"
-            :template="$slots.item"
+            :templates="$slots"
             :root="true"
             :mobileActive="mobileActive"
             tabindex="0"
@@ -37,24 +39,28 @@
             :level="0"
             :aria-labelledby="ariaLabelledby"
             :aria-label="ariaLabel"
+            :pt="pt"
             @focus="onFocus"
             @blur="onBlur"
             @keydown="onKeyDown"
             @item-click="onItemClick"
             @item-mouseenter="onItemMouseEnter"
         />
-        <div v-if="$slots.end" class="p-menubar-end">
+        <div v-if="$slots.end" class="p-menubar-end" v-bind="ptm('end')">
             <slot name="end"></slot>
         </div>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+import BarsIcon from 'primevue/icons/bars';
 import { DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
 import MenubarSub from './MenubarSub.vue';
 
 export default {
     name: 'Menubar',
+    extends: BaseComponent,
     emits: ['focus', 'blur'],
     props: {
         model: {
@@ -605,7 +611,8 @@ export default {
         }
     },
     components: {
-        MenubarSub: MenubarSub
+        MenubarSub: MenubarSub,
+        BarsIcon: BarsIcon
     }
 };
 </script>

package/menubar/MenubarSub.vue

@@ -1,5 +1,5 @@
 <template>
-    <ul>
+    <ul v-bind="ptm('menu')">
         <template v-for="(processedItem, index) of items" :key="getItemKey(processedItem)">
             <li
                 v-if="isItemVisible(processedItem) && !getItemProp(processedItem, 'separator')"
@@ -14,22 +14,37 @@
                 :aria-level="level + 1"
                 :aria-setsize="getAriaSetSize()"
                 :aria-posinset="getAriaPosInset(index)"
+                v-bind="getPTOptions(processedItem, 'menuitem')"
             >
-                <div class="p-menuitem-content" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)">
-                    <template v-if="!template">
+                <div class="p-menuitem-content" @click="onItemClick($event, processedItem)" @mouseenter="onItemMouseEnter($event, processedItem)" v-bind="getPTOptions(processedItem, 'content')">
+                    <template v-if="!templates.item">
                         <router-link v-if="getItemProp(processedItem, 'to') && !isItemDisabled(processedItem)" v-slot="{ navigate, href, isActive, isExactActive }" :to="getItemProp(processedItem, 'to')" custom>
-                            <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)">
-                                <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
-                                <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
+                            <a v-ripple :href="href" :class="getItemActionClass(processedItem, { isActive, isExactActive })" tabindex="-1" aria-hidden="true" @click="onItemActionClick($event, navigate)" v-bind="getPTOptions(processedItem, 'action')">
+                                <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                                <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
+                                <span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
                             </a>
                         </router-link>
-                        <a v-else v-ripple :href="getItemProp(processedItem, 'url')" :class="getItemActionClass(processedItem)" :target="getItemProp(processedItem, 'target')" tabindex="-1" aria-hidden="true">
-                            <span v-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)"></span>
-                            <span class="p-menuitem-text">{{ getItemLabel(processedItem) }}</span>
-                            <span v-if="getItemProp(processedItem, 'items')" :class="getSubmenuIcon()"></span>
+                        <a
+                            v-else
+                            v-ripple
+                            :href="getItemProp(processedItem, 'url')"
+                            :class="getItemActionClass(processedItem)"
+                            :target="getItemProp(processedItem, 'target')"
+                            tabindex="-1"
+                            aria-hidden="true"
+                            v-bind="getPTOptions(processedItem, 'action')"
+                        >
+                            <component v-if="templates.itemicon" :is="templates.itemicon" :item="processedItem.item" :class="getItemIconClass(processedItem)" />
+                            <span v-else-if="getItemProp(processedItem, 'icon')" :class="getItemIconClass(processedItem)" v-bind="getPTOptions(processedItem, 'icon')" />
+                            <span class="p-menuitem-text" v-bind="getPTOptions(processedItem, 'label')">{{ getItemLabel(processedItem) }}</span>
+                            <template v-if="getItemProp(processedItem, 'items')">
+                                <component v-if="templates.submenuicon" :is="templates.submenuicon" :root="root" :active="isItemActive(processedItem)" class="p-submenu-icon" />
+                                <component v-else :is="root ? 'AngleDownIcon' : 'AngleRightIcon'" class="p-submenu-icon" v-bind="getPTOptions(processedItem, 'submenuIcon')" />
+                            </template>
                         </a>
                     </template>
-                    <component v-else :is="template" :item="processedItem.item"></component>
+                    <component v-else :is="templates.item" :item="processedItem.item"></component>
                 </div>
                 <MenubarSub
                     v-if="isItemVisible(processedItem) && isItemGroup(processedItem)"
@@ -40,24 +55,36 @@
                     :items="processedItem.items"
                     :mobileActive="mobileActive"
                     :activeItemPath="activeItemPath"
-                    :template="template"
+                    :templates="templates"
                     :exact="exact"
                     :level="level + 1"
+                    :pt="pt"
                     @item-click="$emit('item-click', $event)"
                     @item-mouseenter="$emit('item-mouseenter', $event)"
                 />
             </li>
-            <li v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')" :id="getItemId(processedItem)" :style="getItemProp(processedItem, 'style')" :class="getSeparatorItemClass(processedItem)" role="separator"></li>
+            <li
+                v-if="isItemVisible(processedItem) && getItemProp(processedItem, 'separator')"
+                :id="getItemId(processedItem)"
+                :style="getItemProp(processedItem, 'style')"
+                :class="getSeparatorItemClass(processedItem)"
+                role="separator"
+                v-bind="ptm('separator')"
+            ></li>
         </template>
     </ul>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
+import AngleDownIcon from 'primevue/icons/angledown';
+import AngleRightIcon from 'primevue/icons/angleright';
 import Ripple from 'primevue/ripple';
 import { ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'MenubarSub',
+    extends: BaseComponent,
     emits: ['item-mouseenter', 'item-click'],
     props: {
         items: {
@@ -76,8 +103,8 @@ export default {
             type: Boolean,
             default: false
         },
-        template: {
-            type: Function,
+        templates: {
+            type: Object,
             default: null
         },
         exact: {
@@ -115,6 +142,14 @@ export default {
         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);
         },
@@ -171,9 +206,6 @@ export default {
         },
         getSeparatorItemClass(processedItem) {
             return ['p-menuitem-separator', this.getItemProp(processedItem, 'class')];
-        },
-        getSubmenuIcon() {
-            return ['p-submenu-icon pi', { 'pi-angle-right': !this.root, 'pi-angle-down': this.root }];
         }
     },
     computed: {
@@ -181,6 +213,10 @@ export default {
             return { 'p-submenu-list': !this.root, 'p-menubar-root-list': this.root };
         }
     },
+    components: {
+        AngleRightIcon: AngleRightIcon,
+        AngleDownIcon: AngleDownIcon
+    },
     directives: {
         ripple: Ripple
     }

package/menubar/menubar.cjs.js

@@ -1,15 +1,24 @@
 'use strict';
 
+var BaseComponent = require('primevue/basecomponent');
+var BarsIcon = require('primevue/icons/bars');
 var utils = require('primevue/utils');
+var AngleDownIcon = require('primevue/icons/angledown');
+var AngleRightIcon = require('primevue/icons/angleright');
 var Ripple = require('primevue/ripple');
 var vue = require('vue');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var BaseComponent__default = /*#__PURE__*/_interopDefaultLegacy(BaseComponent);
+var BarsIcon__default = /*#__PURE__*/_interopDefaultLegacy(BarsIcon);
+var AngleDownIcon__default = /*#__PURE__*/_interopDefaultLegacy(AngleDownIcon);
+var AngleRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(AngleRightIcon);
 var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
 var script$1 = {
     name: 'MenubarSub',
+    extends: BaseComponent__default["default"],
     emits: ['item-mouseenter', 'item-click'],
     props: {
         items: {
@@ -28,8 +37,8 @@ var script$1 = {
             type: Boolean,
             default: false
         },
-        template: {
-            type: Function,
+        templates: {
+            type: Object,
             default: null
         },
         exact: {
@@ -67,6 +76,14 @@ var script$1 = {
         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);
         },
@@ -123,9 +140,6 @@ var script$1 = {
         },
         getSeparatorItemClass(processedItem) {
             return ['p-menuitem-separator', this.getItemProp(processedItem, 'class')];
-        },
-        getSubmenuIcon() {
-            return ['p-submenu-icon pi', { 'pi-angle-right': !this.root, 'pi-angle-down': this.root }];
         }
     },
     computed: {
@@ -133,35 +147,37 @@ var script$1 = {
             return { 'p-submenu-list': !this.root, 'p-menubar-root-list': this.root };
         }
     },
+    components: {
+        AngleRightIcon: AngleRightIcon__default["default"],
+        AngleDownIcon: AngleDownIcon__default["default"]
+    },
     directives: {
         ripple: Ripple__default["default"]
     }
 };
 
 const _hoisted_1$1 = ["id", "aria-label", "aria-disabled", "aria-expanded", "aria-haspopup", "aria-level", "aria-setsize", "aria-posinset"];
-const _hoisted_2$1 = ["onClick", "onMouseenter"];
-const _hoisted_3$1 = ["href", "onClick"];
-const _hoisted_4$1 = { class: "p-menuitem-text" };
-const _hoisted_5$1 = ["href", "target"];
-const _hoisted_6 = { class: "p-menuitem-text" };
-const _hoisted_7 = ["id"];
+const _hoisted_2 = ["onClick", "onMouseenter"];
+const _hoisted_3 = ["href", "onClick"];
+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");
   const _component_MenubarSub = vue.resolveComponent("MenubarSub", 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,
@@ -170,13 +186,13 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
               "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))
-              }, [
-                (!$props.template)
+              }, $options.getPTOptions(processedItem, 'content')), [
+                (!$props.templates.item)
                   ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
                       ($options.getItemProp(processedItem, 'to') && !$options.isItemDisabled(processedItem))
                         ? (vue.openBlock(), vue.createBlock(_component_router_link, {
@@ -185,56 +201,77 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                             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.getItemProp(processedItem, 'icon'))
-                                  ? (vue.openBlock(), vue.createElementBlock("span", {
+                              }, $options.getPTOptions(processedItem, 'action')), [
+                                ($props.templates.itemicon)
+                                  ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.itemicon), {
                                       key: 0,
+                                      item: processedItem.item,
                                       class: vue.normalizeClass($options.getItemIconClass(processedItem))
-                                    }, null, 2))
-                                  : vue.createCommentVNode("", true),
-                                vue.createElementVNode("span", _hoisted_4$1, vue.toDisplayString($options.getItemLabel(processedItem)), 1)
-                              ], 10, _hoisted_3$1)), [
+                                    }, null, 8, ["item", "class"]))
+                                  : ($options.getItemProp(processedItem, 'icon'))
+                                    ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                                        key: 1,
+                                        class: $options.getItemIconClass(processedItem)
+                                      }, $options.getPTOptions(processedItem, 'icon')), null, 16))
+                                    : vue.createCommentVNode("", true),
+                                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.getItemProp(processedItem, 'icon'))
-                              ? (vue.openBlock(), vue.createElementBlock("span", {
+                          }, $options.getPTOptions(processedItem, 'action')), [
+                            ($props.templates.itemicon)
+                              ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.itemicon), {
                                   key: 0,
+                                  item: processedItem.item,
                                   class: vue.normalizeClass($options.getItemIconClass(processedItem))
-                                }, null, 2))
-                              : vue.createCommentVNode("", true),
-                            vue.createElementVNode("span", _hoisted_6, vue.toDisplayString($options.getItemLabel(processedItem)), 1),
+                                }, null, 8, ["item", "class"]))
+                              : ($options.getItemProp(processedItem, 'icon'))
+                                ? (vue.openBlock(), vue.createElementBlock("span", vue.mergeProps({
+                                    key: 1,
+                                    class: $options.getItemIconClass(processedItem)
+                                  }, $options.getPTOptions(processedItem, 'icon')), null, 16))
+                                : vue.createCommentVNode("", true),
+                            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("span", {
-                                  key: 1,
-                                  class: vue.normalizeClass($options.getSubmenuIcon())
-                                }, null, 2))
+                              ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+                                  ($props.templates.submenuicon)
+                                    ? (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.submenuicon), {
+                                        key: 0,
+                                        root: $props.root,
+                                        active: $options.isItemActive(processedItem),
+                                        class: "p-submenu-icon"
+                                      }, null, 8, ["root", "active"]))
+                                    : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.root ? 'AngleDownIcon' : 'AngleRightIcon'), vue.mergeProps({
+                                        key: 1,
+                                        class: "p-submenu-icon"
+                                      }, $options.getPTOptions(processedItem, 'submenuIcon')), null, 16))
+                                ], 64))
                               : vue.createCommentVNode("", true)
-                          ], 10, _hoisted_5$1)), [
+                          ], 16, _hoisted_4)), [
                             [_directive_ripple]
                           ])
                     ], 64))
-                  : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.template), {
+                  : (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.templates.item), {
                       key: 1,
                       item: processedItem.item
                     }, null, 8, ["item"]))
-              ], 40, _hoisted_2$1),
+              ], 16, _hoisted_2),
               ($options.isItemVisible(processedItem) && $options.isItemGroup(processedItem))
                 ? (vue.openBlock(), vue.createBlock(_component_MenubarSub, {
                     key: 0,
@@ -245,33 +282,35 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
                     items: processedItem.items,
                     mobileActive: $props.mobileActive,
                     activeItemPath: $props.activeItemPath,
-                    template: $props.template,
+                    templates: $props.templates,
                     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, ["menuId", "focusedItemId", "items", "mobileActive", "activeItemPath", "template", "exact", "level"]))
+                  }, null, 8, ["menuId", "focusedItemId", "items", "mobileActive", "activeItemPath", "templates", "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: 'Menubar',
+    extends: BaseComponent__default["default"],
     emits: ['focus', 'blur'],
     props: {
         model: {
@@ -822,35 +861,28 @@ var script = {
         }
     },
     components: {
-        MenubarSub: script$1
+        MenubarSub: script$1,
+        BarsIcon: BarsIcon__default["default"]
     }
 };
 
-const _hoisted_1 = {
-  key: 0,
-  class: "p-menubar-start"
-};
-const _hoisted_2 = ["aria-haspopup", "aria-expanded", "aria-controls", "aria-label"];
-const _hoisted_3 = /*#__PURE__*/vue.createElementVNode("i", { class: "pi pi-bars" }, null, -1);
-const _hoisted_4 = [
-  _hoisted_3
-];
-const _hoisted_5 = {
-  key: 2,
-  class: "p-menubar-end"
-};
+const _hoisted_1 = ["aria-haspopup", "aria-expanded", "aria-controls", "aria-label"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_BarsIcon = vue.resolveComponent("BarsIcon");
   const _component_MenubarSub = vue.resolveComponent("MenubarSub");
 
-  return (vue.openBlock(), vue.createElementBlock("div", {
+  return (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
     ref: $options.containerRef,
-    class: vue.normalizeClass($options.containerClass)
-  }, [
+    class: $options.containerClass
+  }, _ctx.ptm('root')), [
     (_ctx.$slots.start)
-      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+      ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+          key: 0,
+          class: "p-menubar-start"
+        }, _ctx.ptm('start')), [
           vue.renderSlot(_ctx.$slots, "start")
-        ]))
+        ], 16))
       : vue.createCommentVNode("", true),
     ($props.model && $props.model.length > 0)
       ? (vue.openBlock(), vue.createElementBlock("a", vue.mergeProps({
@@ -865,7 +897,11 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           "aria-label": _ctx.$primevue.config.locale.aria.navigation,
           onClick: _cache[0] || (_cache[0] = $event => ($options.menuButtonClick($event))),
           onKeydown: _cache[1] || (_cache[1] = $event => ($options.menuButtonKeydown($event)))
-        }, $props.buttonProps), _hoisted_4, 16, _hoisted_2))
+        }, { ...$props.buttonProps, ..._ctx.ptm('button') }), [
+          vue.renderSlot(_ctx.$slots, "popupicon", {}, () => [
+            vue.createVNode(_component_BarsIcon, vue.normalizeProps(vue.guardReactiveProps(_ctx.ptm('popupIcon'))), null, 16)
+          ])
+        ], 16, _hoisted_1))
       : vue.createCommentVNode("", true),
     vue.createVNode(_component_MenubarSub, {
       ref: $options.menubarRef,
@@ -873,7 +909,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       class: "p-menubar-root-list",
       role: "menubar",
       items: $options.processedItems,
-      template: _ctx.$slots.item,
+      templates: _ctx.$slots,
       root: true,
       mobileActive: $data.mobileActive,
       tabindex: "0",
@@ -885,18 +921,22 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       level: 0,
       "aria-labelledby": _ctx.ariaLabelledby,
       "aria-label": _ctx.ariaLabel,
+      pt: _ctx.pt,
       onFocus: $options.onFocus,
       onBlur: $options.onBlur,
       onKeydown: $options.onKeyDown,
       onItemClick: $options.onItemClick,
       onItemMouseenter: $options.onItemMouseEnter
-    }, null, 8, ["id", "items", "template", "mobileActive", "aria-activedescendant", "menuId", "focusedItemId", "activeItemPath", "exact", "aria-labelledby", "aria-label", "onFocus", "onBlur", "onKeydown", "onItemClick", "onItemMouseenter"]),
+    }, null, 8, ["id", "items", "templates", "mobileActive", "aria-activedescendant", "menuId", "focusedItemId", "activeItemPath", "exact", "aria-labelledby", "aria-label", "pt", "onFocus", "onBlur", "onKeydown", "onItemClick", "onItemMouseenter"]),
     (_ctx.$slots.end)
-      ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
+      ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+          key: 2,
+          class: "p-menubar-end"
+        }, _ctx.ptm('end')), [
           vue.renderSlot(_ctx.$slots, "end")
-        ]))
+        ], 16))
       : vue.createCommentVNode("", true)
-  ], 2))
+  ], 16))
 }
 
 function styleInject(css, ref) {