Toolbar pt updates

components/lib/toolbar/Toolbar.d.ts

@@ -10,6 +10,46 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ToolbarPassThroughOptionType = ToolbarPassThroughAttributes | ((options: ToolbarPassThroughMethodOptions) => ToolbarPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ToolbarPassThroughMethodOptions {
+    props: ToolbarProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ToolbarProps.pt}
+ */
+export interface ToolbarPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ToolbarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the groupleft's DOM element.
+     */
+    groupleft?: ToolbarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the groupcenter's DOM element.
+     */
+    groupcenter?: ToolbarPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the groupright's DOM element.
+     */
+    groupright?: ToolbarPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ToolbarPassThroughAttributes {
+    [key: string]: any;
+}
+
+
 /**
  * Defines valid properties in Toolbar component.
  */
@@ -18,6 +58,11 @@ export interface ToolbarProps {
      * Defines a string value that labels an interactive element.
      */
     'aria-labelledby'?: string | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ToolbarPassThroughOptions}
+     */
+    pt?: ToolbarPassThroughOptions;
 }
 
 /**

components/lib/toolbar/Toolbar.vue

@@ -1,20 +1,22 @@
 <template>
-    <div class="p-toolbar p-component" role="toolbar" :aria-labelledby="ariaLabelledby">
-        <div class="p-toolbar-group-start p-toolbar-group-left">
+    <div class="p-toolbar p-component" role="toolbar" :aria-labelledby="ariaLabelledby" v-bind="ptm('root')">
+        <div class="p-toolbar-group-start p-toolbar-group-left" v-bind="ptm('groupleft')">
             <slot name="start"></slot>
         </div>
-        <div class="p-toolbar-group-center">
+        <div class="p-toolbar-group-center" v-bind="ptm('groupcenter')">
             <slot name="center"></slot>
         </div>
-        <div class="p-toolbar-group-end p-toolbar-group-right">
+        <div class="p-toolbar-group-end p-toolbar-group-right" v-bind="ptm('groupright')">
             <slot name="end"></slot>
         </div>
     </div>
 </template>
 
 <script>
+import ComponentBase from 'primevue/base';
 export default {
     name: 'Toolbar',
+    extends: ComponentBase,
     props: {
         'aria-labelledby': {
             type: String,