Merge branch 'pass-through'

api-generator/build-apidoc.js

@@ -24,7 +24,7 @@ app.options.addReader(new TypeDoc.TypeDocReader());
 app.bootstrap({
     // typedoc options here
     name: 'PrimeVue',
-    entryPoints: [`components/lib`],
+    entryPoints: [`components/lib/`],
     entryPointStrategy: 'expand',
     hideGenerator: true,
     excludeExternals: true,
@@ -441,6 +441,24 @@ if (project) {
                     });
 
                 let values = event.type.toString();
+
+                if (values.includes('Function') && event.type.types) {
+                    values = '';
+
+                    for (const [i, type] of event.type.types.entries()) {
+                        if (type.declaration && type.declaration.signatures) {
+                            const signature = type.declaration.signatures[0];
+                            const parameters = signature.parameters.reduce((acc, { name, type }, index) => (index === 0 ? `${name}: ${type.name}` : `${acc}, ${name}: ${type.name}`), '');
+
+                            values += i === 0 ? `(${parameters}) => ${signature.type?.name}` : ` | (${parameters}) => ${signature.type?.name}`;
+                        } else {
+                            const typeName = type.name || type.value;
+
+                            values += i === 0 ? `${typeName}` : ` | ${typeName}`;
+                        }
+                    }
+                }
+
                 const declaration = event.type.declaration;
 
                 if (declaration) {

api-generator/components/accordion.js

@@ -40,6 +40,12 @@ const AccordionProps = [
         type: 'boolean',
         default: 'false',
         description: 'When enabled, the focused tab is activated.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/accordiontab.js

@@ -52,6 +52,23 @@ const AccordionTabProps = [
         type: 'boolean',
         default: 'false',
         description: 'Whether the tab is disabled.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
+    }
+];
+
+const AccordionTabSlots = [
+    {
+        name: 'header',
+        description: 'Custom content for the title section of a AccordionTab is defined using the header template.'
+    },
+    {
+        name: 'headericon',
+        description: 'Custom icon for the header section of a AccordionTab is defined using the headericon template.'
     }
 ];
 
@@ -59,6 +76,7 @@ module.exports = {
     accordiontab: {
         name: 'AccordionTab',
         description: 'Accordion element consists of one or more AccordionTab elements.',
-        props: AccordionTabProps
+        props: AccordionTabProps,
+        slots: AccordionTabSlots
     }
 };

api-generator/components/deferredcontent.js

@@ -1,3 +1,12 @@
+const DeferredContentProps = [
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
+    }
+];
+
 const DeferredContentEvents = [
     {
         name: 'load',
@@ -16,6 +25,7 @@ module.exports = {
     deferredcontent: {
         name: 'DeferredContent',
         description: 'DeferredContent postpones the loading the content that is initially not in the viewport until it becomes visible on scroll.',
+        props: DeferredContentProps,
         events: DeferredContentEvents
     }
 };

api-generator/components/divider.js

@@ -16,6 +16,12 @@ const DividerProps = [
         type: 'string',
         default: 'solid',
         description: 'Border style type, default is "solid" and other options are "dashed" and "dotted".'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/fieldset.js

@@ -22,6 +22,12 @@ const FieldsetProps = [
         type: 'string',
         default: 'null',
         description: 'Uses to pass the custom value to read for the AnchorHTMLAttributes inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -47,7 +53,11 @@ const FieldsetEvents = [
 const FieldsetSlots = [
     {
         name: 'legend',
-        description: "Custom content for the component's header"
+        description: 'Custom legend template.'
+    },
+    {
+        name: 'togglericon',
+        description: 'Custom toggler icon template.'
     }
 ];
 

api-generator/components/panel.js

@@ -22,6 +22,12 @@ const PanelProps = [
         type: 'string',
         default: 'null',
         description: 'Uses to pass the custom value to read for the anchor inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -52,6 +58,10 @@ const PanelSlots = [
     {
         name: 'icons',
         description: "Custom content for the header's icon"
+    },
+    {
+        name: 'headericon',
+        description: 'Custom header icon template of panel'
     }
 ];
 

api-generator/components/scrollpanel.js

@@ -4,6 +4,12 @@ const ScrollPanelProps = [
         type: 'number',
         default: '5',
         description: 'Step factor to scroll the content while pressing the arrow keys.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/splitter.js

@@ -28,6 +28,12 @@ const SplitterProps = [
         type: 'number',
         default: '5',
         description: 'Step factor to increment/decrement the size of the panels while pressing the arrow keys.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/splitterpanel.js

@@ -10,6 +10,12 @@ const SplitterPanelProps = [
         type: 'number',
         default: 'null',
         description: 'Minimum size of the element relative to 100%.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/tabpanel.js

@@ -52,6 +52,12 @@ const TabPanelProps = [
         type: 'boolean',
         default: 'null',
         description: 'Whether the tab is disabled.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

api-generator/components/tabview.js

@@ -40,6 +40,12 @@ const TabViewProps = [
         type: 'any',
         default: 'null',
         description: 'Uses to pass all properties of the HTMLButtonElement to the next button.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 
@@ -78,11 +84,27 @@ const TabViewEvents = [
     }
 ];
 
+const TabViewSlots = [
+    {
+        name: 'default',
+        description: 'Default slot to detect TabPanel components.'
+    },
+    {
+        name: 'previcon',
+        description: 'Previous button icon template for the scrollable component.'
+    },
+    {
+        name: 'nexticon',
+        description: 'Next button icon template for the scrollable component.'
+    }
+];
+
 module.exports = {
     tabview: {
         name: 'TabView',
         description: 'TabView is a container component to group content with tabs.',
         props: TabViewProps,
-        event: TabViewEvents
+        event: TabViewEvents,
+        slots: TabViewSlots
     }
 };

api-generator/components/toolbar.js

@@ -4,6 +4,12 @@ const ToolbarProps = [
         type: 'string',
         default: 'null',
         description: 'Defines a string value that labels an interactive element.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

components/lib/accordion/Accordion.d.ts

@@ -10,6 +10,15 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type AccordionPassThroughOptionType = AccordionPassThroughAttributes | ((options: AccordionPassThroughMethodOptions) => AccordionPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface AccordionPassThroughMethodOptions {
+    props: AccordionProps;
+    state: AccordionState;
+}
 /**
  * Custom tab open event.
  * @see {@link AccordionEmits.tab-open}
@@ -40,6 +49,38 @@ export interface AccordionTabCloseEvent extends AccordionTabOpenEvent {}
  */
 export interface AccordionClickEvent extends AccordionTabOpenEvent {}
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link AccordionProps.pt}
+ */
+export interface AccordionPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: AccordionPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface AccordionPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Accordion component.
+ */
+export interface AccordionState {
+    /**
+     * Current id state as a string
+     */
+    id: string;
+    /**
+     * Current active index state.
+     */
+    d_activeIndex: number | number[];
+}
+
 /**
  * Defines valid properties in Accordion component.
  */
@@ -79,6 +120,11 @@ export interface AccordionProps {
      * @defaultValue false
      */
     selectOnFocus?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {AccordionPassThroughOptions}
+     */
+    pt?: AccordionPassThroughOptions;
 }
 
 /**

components/lib/accordion/Accordion.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="p-accordion p-component">
+    <div class="p-accordion p-component" v-bind="ptm('root')">
-        <div v-for="(tab, i) of tabs" :key="getKey(tab, i)" :class="getTabClass(i)" :data-index="i">
+        <div v-for="(tab, i) of tabs" :key="getKey(tab, i)" :class="getTabClass(i)" :data-index="i" v-bind="getTabPT(tab, 'root')">
-            <div :style="getTabProp(tab, 'headerStyle')" :class="getTabHeaderClass(tab, i)" v-bind="getTabProp(tab, 'headerProps')">
+            <div :style="getTabProp(tab, 'headerStyle')" :class="getTabHeaderClass(tab, i)" v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'header') }">
                 <a
                     :id="getTabHeaderActionId(i)"
                     class="p-accordion-header-link p-accordion-header-action"
@@ -12,10 +12,11 @@
                     :aria-controls="getTabContentId(i)"
                     @click="onTabClick($event, tab, i)"
                     @keydown="onTabKeyDown($event, tab, i)"
-                    v-bind="getTabProp(tab, 'headerActionProps')"
+                    v-bind="{ ...getTabProp(tab, 'headeractionprops'), ...getTabPT(tab, 'headeraction') }"
                 >
-                    <span :class="getTabHeaderIconClass(i)" aria-hidden="true"></span>
+                    <component v-if="tab.children && tab.children.headericon" :is="tab.children.headericon" :isTabActive="isTabActive(i)" :index="i"></component>
-                    <span v-if="tab.props && tab.props.header" class="p-accordion-header-text">{{ tab.props.header }}</span>
+                    <span v-else :class="getTabHeaderIconClass(i)" aria-hidden="true" v-bind="getTabPT(tab, 'headericon')"></span>
+                    <span v-if="tab.props && tab.props.header" class="p-accordion-header-text" v-bind="getTabPT(tab, 'headertitle')">{{ tab.props.header }}</span>
                     <component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
                 </a>
             </div>
@@ -28,9 +29,9 @@
                     :class="getTabContentClass(tab)"
                     role="region"
                     :aria-labelledby="getTabHeaderActionId(i)"
-                    v-bind="getTabProp(tab, 'contentProps')"
+                    v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'toggleablecontent') }"
                 >
-                    <div class="p-accordion-content">
+                    <div class="p-accordion-content" v-bind="getTabPT(tab, 'content')">
                         <component :is="tab"></component>
                     </div>
                 </div>
@@ -40,11 +41,13 @@
 </template>
 
 <script>
+import ComponentBase from 'primevue/base';
 import Ripple from 'primevue/ripple';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'Accordion',
+    extends: ComponentBase,
     emits: ['update:activeIndex', 'tab-open', 'tab-close', 'tab-click'],
     props: {
         multiple: {
@@ -112,6 +115,15 @@ export default {
         getTabContentId(index) {
             return `${this.id}_${index}_content`;
         },
+        getTabPT(tab, key) {
+            return this.ptmo(this.getTabProp(tab, 'pt'), key, {
+                props: tab.props,
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                }
+            });
+        },
         onTabClick(event, tab, index) {
             this.changeActiveIndex(event, tab, index);
             this.$emit('tab-click', { originalEvent: event, index });

components/lib/accordiontab/AccordionTab.d.ts

@@ -8,8 +8,61 @@
  *
  */
 import { AnchorHTMLAttributes, HTMLAttributes, VNode } from 'vue';
+import { AccordionPassThroughOptions } from '../accordion';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type AccordionTabPassThroughOptionType = AccordionTabPassThroughAttributes | ((options: AccordionTabPassThroughMethodOptions) => AccordionTabPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface AccordionTabPassThroughMethodOptions {
+    props: AccordionTabProps;
+    parent: AccordionPassThroughOptions;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link AccordionTabProps.pt}
+ */
+export interface AccordionTabPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: AccordionTabPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: AccordionTabPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the headeraction's DOM element.
+     */
+    headeraction?: AccordionTabPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the headericon's DOM element.
+     */
+    headericon?: AccordionTabPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the headertitle's DOM element.
+     */
+    headertitle?: AccordionTabPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the toggleablecontent's DOM element.
+     */
+    toggleablecontent?: AccordionTabPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: AccordionTabPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface AccordionTabPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in AccordionTab component.
  */
@@ -28,10 +81,12 @@ export interface AccordionTabProps {
     headerClass?: any;
     /**
      * Uses to pass all properties of the HTMLDivElement to the tab header.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     headerProps?: HTMLAttributes | undefined;
     /**
      * Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     headerActionProps?: AnchorHTMLAttributes | undefined;
     /**
@@ -44,6 +99,7 @@ export interface AccordionTabProps {
     contentClass?: any;
     /**
      * Uses to pass all properties of the HTMLDivElement to the tab content.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     contentProps?: HTMLAttributes | undefined;
     /**
@@ -51,6 +107,11 @@ export interface AccordionTabProps {
      * @defaultValue false
      */
     disabled?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {AccordionTabPassThroughOptions}
+     */
+    pt?: AccordionTabPassThroughOptions;
 }
 
 /**
@@ -62,9 +123,23 @@ export interface AccordionTabSlots {
      */
     default(): VNode[];
     /**
-     * Custom content for the title section of a panel is defined using the header template.
+     * Custom content for the title section of a AccordionTab is defined using the header template.
      */
     header(): VNode[];
+    /**
+     * Custom icon for the header section of a AccordionTab is defined using the headericon template.
+     * @param {Object} scope - header slot's params.
+     */
+    headericon(scope: {
+        /**
+         * Index of the tab
+         */
+        index: number;
+        /**
+         * Whether the tab is active
+         */
+        isTabActive(i: number): void;
+    }): VNode[];
 }
 
 /**

components/lib/accordiontab/AccordionTab.vue

@@ -3,8 +3,11 @@
 </template>
 
 <script>
+import ComponentBase from 'primevue/base';
+
 export default {
     name: 'AccordionTab',
+    extends: ComponentBase,
     props: {
         header: null,
         headerStyle: null,

components/lib/base/ComponentBase.vue

@@ -0,0 +1,21 @@
+<script>
+import { ObjectUtils } from 'primevue/utils';
+
+export default {
+    name: 'ComponentBase',
+    props: {
+        pt: {
+            type: Object,
+            value: {}
+        }
+    },
+    methods: {
+        ptm(key = '', params = {}) {
+            return ObjectUtils.getItemValue((this.pt || {})[key.toLowerCase()], { props: this.$props, state: this.$data, ...params });
+        },
+        ptmo(obj = {}, key = '', params = {}) {
+            return ObjectUtils.getItemValue(obj[key.toLowerCase()], params);
+        }
+    }
+};
+</script>

components/lib/base/package.json

@@ -0,0 +1,8 @@
+{
+  "main": "./componentbase.cjs.js",
+  "module": "./componentbase.esm.js",
+  "unpkg": "./componentbase.min.js",
+  "browser": {
+    "./sfc": "./ComponentBase.vue"
+  }
+}

components/lib/card/Card.d.ts

@@ -10,10 +10,56 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type CardPassThroughOptionType = CardPassThroughAttributes | null | undefined;
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link CardProps.pt}
+ */
+export interface CardPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: CardPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the body's DOM element.
+     */
+    body?: CardPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the title's DOM element.
+     */
+    title?: CardPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the subtitle's DOM element.
+     */
+    subtitle?: CardPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: CardPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the footer's DOM element.
+     */
+    footer?: CardPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface CardPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in Card component.
  */
-export interface CardProps {}
+export interface CardProps {
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {CardPassThroughOptions}
+     */
+    pt?: CardPassThroughOptions;
+}
 
 /**
  * Defines valid slots in Card component.

components/lib/card/Card.vue

@@ -1,15 +1,19 @@
 <template>
-    <div class="p-card p-component">
+    <div class="p-card p-component" v-bind="ptm('root')">
-        <div v-if="$slots.header" class="p-card-header">
+        <div v-if="$slots.header" class="p-card-header" v-bind="ptm('header')">
             <slot name="header"></slot>
         </div>
-        <div class="p-card-body">
+        <div class="p-card-body" v-bind="ptm('body')">
-            <div v-if="$slots.title" class="p-card-title"><slot name="title"></slot></div>
+            <div v-if="$slots.title" class="p-card-title" v-bind="ptm('title')">
-            <div v-if="$slots.subtitle" class="p-card-subtitle"><slot name="subtitle"></slot></div>
+                <slot name="title"></slot>
-            <div class="p-card-content">
+            </div>
+            <div v-if="$slots.subtitle" class="p-card-subtitle" v-bind="ptm('subtitle')">
+                <slot name="subtitle"></slot>
+            </div>
+            <div class="p-card-content" v-bind="ptm('content')">
                 <slot name="content"></slot>
             </div>
-            <div v-if="$slots.footer" class="p-card-footer">
+            <div v-if="$slots.footer" class="p-card-footer" v-bind="ptm('footer')">
                 <slot name="footer"></slot>
             </div>
         </div>
@@ -17,13 +21,10 @@
 </template>
 
 <script>
+import ComponentBase from 'primevue/base';
+
 export default {
-    name: 'Card'
+    name: 'Card',
+    extends: ComponentBase
 };
 </script>
-
-<style>
-.p-card-header img {
-    width: 100%;
-}
-</style>

components/lib/deferredcontent/DeferredContent.d.ts

@@ -10,7 +10,55 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
-export interface DeferredContentProps {}
+export declare type DeferredContentPassThroughOptionType = DeferredContentPassThroughAttributes | ((options: DeferredContentPassThroughMethodOptions) => DeferredContentPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface DeferredContentPassThroughMethodOptions {
+    props: DeferredContentProps;
+    state: DeferredContentState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link DeferredContentProps.pt}
+ */
+export interface DeferredContentPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: DeferredContentPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface DeferredContentPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in DeferredContent component.
+ */
+export interface DeferredContentState {
+    /**
+     * Current loaded state as a boolean.
+     * @defaultValue false
+     */
+    loaded?: boolean;
+}
+
+/**
+ * Defines valid props in DeferredContent component.
+ */
+export interface DeferredContentProps {
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {DeferredContentPassThroughOptions}
+     */
+    pt?: DeferredContentPassThroughOptions;
+}
 
 /**
  * Defines valid slots in DeferredContent component.

components/lib/deferredcontent/DeferredContent.vue

@@ -1,12 +1,15 @@
 <template>
-    <div ref="container">
+    <div ref="container" v-bind="ptm('root')">
         <slot v-if="loaded"></slot>
     </div>
 </template>
 
 <script>
+import ComponentBase from 'primevue/base';
+
 export default {
     name: 'DeferredContent',
+    extends: ComponentBase,
     emits: ['load'],
     data() {
         return {

components/lib/divider/Divider.d.ts

@@ -10,6 +10,37 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type DividerPassThroughOptionType = DividerPassThroughAttributes | ((options: DividerPassThroughMethodOptions) => DividerPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface DividerPassThroughMethodOptions {
+    props: DividerProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link DividerProps.pt}
+ */
+export interface DividerPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: DividerPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: DividerPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface DividerPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in Divider component.
  */
@@ -28,6 +59,11 @@ export interface DividerProps {
      * @defaultValue solid
      */
     type?: 'solid' | 'dashed' | 'dotted' | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {DividerPassThroughOptions}
+     */
+    pt?: DividerPassThroughOptions;
 }
 
 /**

components/lib/divider/Divider.vue

@@ -1,14 +1,16 @@
 <template>
-    <div :class="containerClass" role="separator" :aria-orientation="layout">
+    <div :class="containerClass" role="separator" :aria-orientation="layout" v-bind="ptm('root')">
-        <div v-if="$slots.default" class="p-divider-content">
+        <div v-if="$slots.default" class="p-divider-content" v-bind="ptm('content')">
             <slot></slot>
         </div>
     </div>
 </template>
 
 <script>
+import ComponentBase from 'primevue/base';
 export default {
     name: 'Divider',
+    extends: ComponentBase,
     props: {
         align: {
             type: String,

components/lib/fieldset/Fieldset.d.ts

@@ -10,6 +10,16 @@
 import { AnchorHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type FieldsetPassThroughOptionType = FieldsetPassThroughAttributes | ((options: FieldsetPassThroughMethodOptions) => FieldsetPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface FieldsetPassThroughMethodOptions {
+    props: FieldsetProps;
+    state: FieldsetState;
+}
+
 /**
  * Custom toggle event.
  * @see {@link FieldsetEmits.toggle}
@@ -25,6 +35,59 @@ export interface FieldsetToggleEvent {
     value: boolean;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link FieldsetProps.pt}
+ */
+export interface FieldsetPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: FieldsetPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the legend's DOM element.
+     */
+    legend?: FieldsetPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the legend title's DOM element.
+     */
+    legendtitle?: FieldsetPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the toggler's DOM element.
+     */
+    toggler?: FieldsetPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the toggler icon's DOM element.
+     */
+    togglericon?: FieldsetPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the toggleable content's DOM element.
+     */
+    toggleablecontent?: FieldsetPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: FieldsetPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface FieldsetPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Fieldset component.
+ */
+export interface FieldsetState {
+    /**
+     * Current collapsed state as a boolean.
+     * @defaultValue false
+     */
+    d_collapsed: boolean;
+}
+
 /**
  * Defines valid properties in Fieldset component.
  */
@@ -45,8 +108,14 @@ export interface FieldsetProps {
     collapsed?: boolean | undefined;
     /**
      * Uses to pass the custom value to read for the AnchorHTMLAttributes inside the component.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     toggleButtonProps?: AnchorHTMLAttributes | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {FieldsetPassThroughOptions}
+     */
+    pt?: FieldsetPassThroughOptions;
 }
 
 /**
@@ -61,6 +130,10 @@ export interface FieldsetSlots {
      * Custom legend template.
      */
     legend: () => VNode[];
+    /**
+     * Custom toggler icon template.
+     */
+    togglericon: () => VNode[];
 }
 
 /**

components/lib/fieldset/Fieldset.vue

@@ -1,8 +1,8 @@
 <template>
-    <fieldset :class="['p-fieldset p-component', { 'p-fieldset-toggleable': toggleable }]">
+    <fieldset :class="['p-fieldset p-component', { 'p-fieldset-toggleable': toggleable }]" v-bind="ptm('root')">
-        <legend class="p-fieldset-legend">
+        <legend class="p-fieldset-legend" v-bind="ptm('legend')">
             <slot v-if="!toggleable" name="legend">
-                <span :id="ariaId + '_header'" class="p-fieldset-legend-text">{{ legend }}</span>
+                <span :id="ariaId + '_header'" class="p-fieldset-legend-text" v-bind="ptm('legendtitle')">{{ legend }}</span>
             </slot>
             <a
                 v-if="toggleable"
@@ -15,17 +15,19 @@
                 :aria-label="buttonAriaLabel"
                 @click="toggle"
                 @keydown="onKeyDown"
-                v-bind="toggleButtonProps"
+                v-bind="{ ...toggleButtonProps, ...ptm('toggler') }"
             >
-                <span :class="iconClass"></span>
+                <slot name="togglericon" :collapsed="d_collapsed">
+                    <span :class="iconClass" v-bind="ptm('togglericon')"></span>
+                </slot>
                 <slot name="legend">
-                    <span class="p-fieldset-legend-text">{{ legend }}</span>
+                    <span class="p-fieldset-legend-text" v-bind="ptm('legendtitle')">{{ legend }}</span>
                 </slot>
             </a>
         </legend>
         <transition name="p-toggleable-content">
-            <div v-show="!d_collapsed" :id="ariaId + '_content'" class="p-toggleable-content" role="region" :aria-labelledby="ariaId + '_header'">
+            <div v-show="!d_collapsed" :id="ariaId + '_content'" class="p-toggleable-content" role="region" :aria-labelledby="ariaId + '_header'" v-bind="ptm('toggleablecontent')">
-                <div class="p-fieldset-content">
+                <div class="p-fieldset-content" v-bind="ptm('content')">
                     <slot></slot>
                 </div>
             </div>
@@ -34,11 +36,13 @@
 </template>
 
 <script>
+import ComponentBase from 'primevue/base';
 import Ripple from 'primevue/ripple';
 import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'Fieldset',
+    extends: ComponentBase,
     emits: ['update:collapsed', 'toggle'],
     props: {
         legend: String,

components/lib/panel/Panel.d.ts

@@ -10,6 +10,16 @@
 import { ButtonHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type PanelPassThroughOptionType = PanelPassThroughAttributes | ((options: PanelPassThroughMethodOptions) => PanelPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface PanelPassThroughMethodOptions {
+    props: PanelProps;
+    state: PanelState;
+}
+
 /**
  * Custom toggle event.
  * @see {@link PanelEmits.toggle}
@@ -25,6 +35,63 @@ export interface PanelToggleEvent {
     value: boolean;
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link PanelProps.pt}
+ */
+export interface PanelPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: PanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: PanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the title's DOM element.
+     */
+    title?: PanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the title's DOM element.
+     */
+    icons?: PanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the toggler's DOM element.
+     */
+    toggler?: PanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the headericon's DOM element.
+     */
+    headericon?: PanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the toggleablecontent's DOM element.
+     */
+    toggleablecontent?: PanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: PanelPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface PanelPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Panel component.
+ */
+export interface PanelState {
+    /**
+     * Current collapsed state as a boolean.
+     * @defaultValue false
+     */
+    d_collapsed: boolean;
+}
+
 /**
  * Defines valid properties in Panel component.
  */
@@ -45,8 +112,14 @@ export interface PanelProps {
     collapsed?: boolean;
     /**
      * Uses to pass the custom value to read for the button inside the component.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     toggleButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {PanelPassThroughOptions}
+     */
+    pt?: PanelPassThroughOptions;
 }
 
 /**
@@ -65,6 +138,16 @@ export interface PanelSlots {
      * Custom icons template.
      */
     icons(): VNode[];
+    /**
+     * Custom header icon template of panel.
+     * @param {Object} scope - header icon slot's params.
+     */
+    headericon(scope: {
+        /**
+         * Collapsed state as a boolean
+         */
+        collapsed: boolean;
+    }): VNode[];
 }
 
 /**

components/lib/panel/Panel.vue

@@ -1,10 +1,10 @@
 <template>
-    <div :class="containerClass">
+    <div :class="containerClass" v-bind="ptm('root')">
-        <div class="p-panel-header">
+        <div class="p-panel-header" v-bind="ptm('header')">
             <slot name="header">
-                <span v-if="header" :id="ariaId + '_header'" class="p-panel-title">{{ header }}</span>
+                <span v-if="header" :id="ariaId + '_header'" class="p-panel-title" v-bind="ptm('title')">{{ header }}</span>
             </slot>
-            <div class="p-panel-icons">
+            <div class="p-panel-icons" v-bind="ptm('icons')">
                 <slot name="icons"></slot>
                 <button
                     v-if="toggleable"
@@ -18,15 +18,17 @@
                     :aria-expanded="!d_collapsed"
                     @click="toggle"
                     @keydown="onKeyDown"
-                    v-bind="toggleButtonProps"
+                    v-bind="{ ...toggleButtonProps, ...ptm('toggler') }"
                 >
-                    <span :class="{ 'pi pi-minus': !d_collapsed, 'pi pi-plus': d_collapsed }"></span>
+                    <slot name="headericon" :collapsed="d_collapsed">
+                        <span :class="{ 'pi pi-minus': !d_collapsed, 'pi pi-plus': d_collapsed }" v-bind="ptm('headericon')"></span>
+                    </slot>
                 </button>
             </div>
         </div>
         <transition name="p-toggleable-content">
-            <div v-show="!d_collapsed" :id="ariaId + '_content'" class="p-toggleable-content" role="region" :aria-labelledby="ariaId + '_header'">
+            <div v-show="!d_collapsed" :id="ariaId + '_content'" class="p-toggleable-content" role="region" :aria-labelledby="ariaId + '_header'" v-bind="ptm('toggleablecontent')">
-                <div class="p-panel-content">
+                <div class="p-panel-content" v-bind="ptm('content')">
                     <slot></slot>
                 </div>
             </div>
@@ -35,11 +37,13 @@
 </template>
 
 <script>
+import ComponentBase from 'primevue/base';
 import Ripple from 'primevue/ripple';
 import { UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'Panel',
+    extends: ComponentBase,
     emits: ['update:collapsed', 'toggle'],
     props: {
         header: String,

components/lib/scrollpanel/ScrollPanel.d.ts

@@ -10,6 +10,75 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type ScrollPanelPassThroughOptionType = ScrollPanelPassThroughAttributes | ((options: ScrollPanelPassThroughMethodOptions) => ScrollPanelPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface ScrollPanelPassThroughMethodOptions {
+    props: ScrollPanelProps;
+    state: ScrollPanelState;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link ScrollPanelProps.pt}
+ */
+export interface ScrollPanelPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: ScrollPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the wrapper's DOM element.
+     */
+    wrapper?: ScrollPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the content's DOM element.
+     */
+    content?: ScrollPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the horizontal panel's DOM element.
+     */
+    barx?: ScrollPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the vertical panel's DOM element.
+     */
+    bary?: ScrollPanelPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface ScrollPanelPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Panel component.
+ */
+export interface ScrollPanelState {
+    /**
+     * Current id state as a string.
+     */
+    id: string;
+    /**
+     * Current scrollpanel orientation.
+     * @defaultValue vertical
+     */
+    orientation: string;
+    /**
+     * Latest scroll top position.
+     * @defaultValue 0
+     */
+    lastScrollTop: number;
+    /**
+     * Latest scroll left position.
+     * @defaultValue 0
+     */
+    lastScrollLeft: number;
+}
+
 /**
  * Defines valid properties in ScrollPanel component.
  */
@@ -19,6 +88,11 @@ export interface ScrollPanelProps {
      * @defaultValue 5
      */
     step?: number | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {ScrollPanelPassThroughOptions}
+     */
+    pt?: ScrollPanelPassThroughOptions;
 }
 
 /**

components/lib/scrollpanel/ScrollPanel.vue

@@ -1,7 +1,7 @@
 <template>
-    <div class="p-scrollpanel p-component">
+    <div class="p-scrollpanel p-component" v-bind="ptm('root')">
-        <div class="p-scrollpanel-wrapper">
+        <div class="p-scrollpanel-wrapper" v-bind="ptm('wrapper')">
-            <div ref="content" class="p-scrollpanel-content" @scroll="onScroll" @mouseenter="moveBar">
+            <div ref="content" class="p-scrollpanel-content" @scroll="onScroll" @mouseenter="moveBar" v-bind="ptm('content')">
                 <slot></slot>
             </div>
         </div>
@@ -17,6 +17,7 @@
             @keyup="onKeyUp"
             @focus="onFocus"
             @blur="onBlur"
+            v-bind="ptm('barx')"
         ></div>
         <div
             ref="yBar"
@@ -29,15 +30,18 @@
             @keydown="onKeyDown($event)"
             @keyup="onKeyUp"
             @focus="onFocus"
+            v-bind="ptm('bary')"
         ></div>
     </div>
 </template>
 
 <script>
+import ComponentBase from 'primevue/base';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'ScrollPanel',
+    extends: ComponentBase,
     props: {
         step: {
             type: Number,

components/lib/splitter/Splitter.d.ts

@@ -10,6 +10,16 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type SplitterPassThroughOptionType = SplitterPassThroughAttributes | ((options: SplitterPassThroughMethodOptions) => SplitterPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SplitterPassThroughMethodOptions {
+    props: SplitterProps;
+    state: SplitterState;
+}
+
 /**
  * Custom resize start event.
  * @see {@link SplitterEmits.resizestar}
@@ -40,6 +50,42 @@ export interface SplitterResizeEndEvent {
     sizes: number[];
 }
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link SplitterProps.pt}
+ */
+export interface SplitterPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: SplitterPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the gutter's DOM element.
+     */
+    gutter?: SplitterPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the gutter handler's DOM element.
+     */
+    gutterhandler?: SplitterPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface SplitterPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in Panel component.
+ */
+export interface SplitterState {
+    /**
+     * Previous size state as a number.
+     */
+    prevSize: number;
+}
+
 /**
  * Defines valid properties in Splitter component.
  */
@@ -68,6 +114,11 @@ export interface SplitterProps {
      * @defaultValue 1
      */
     step?: number | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {SplitterPassThroughOptions}
+     */
+    pt?: SplitterPassThroughOptions;
 }
 
 /**

components/lib/splitter/Splitter.vue

@@ -1,19 +1,31 @@
 <template>
-    <div :class="containerClass">
+    <div :class="containerClass" v-bind="ptm('root')">
         <template v-for="(panel, i) of panels" :key="i">
             <component :is="panel" tabindex="-1"></component>
-            <div v-if="i !== panels.length - 1" class="p-splitter-gutter" @mousedown="onGutterMouseDown($event, i)" @touchstart="onGutterTouchStart($event, i)" @touchmove="onGutterTouchMove($event, i)" @touchend="onGutterTouchEnd($event, i)">
+            <div
-                <div class="p-splitter-gutter-handle" tabindex="0" :style="gutterStyle" role="separator" :aria-orientation="layout" :aria-valuenow="prevSize" @keyup="onGutterKeyUp" @keydown="onGutterKeyDown($event, i)"></div>
+                v-if="i !== panels.length - 1"
+                class="p-splitter-gutter"
+                role="separator"
+                tabindex="-1"
+                @mousedown="onGutterMouseDown($event, i)"
+                @touchstart="onGutterTouchStart($event, i)"
+                @touchmove="onGutterTouchMove($event, i)"
+                @touchend="onGutterTouchEnd($event, i)"
+                v-bind="ptm('gutter')"
+            >
+                <div class="p-splitter-gutter-handle" tabindex="0" :style="gutterStyle" :aria-orientation="layout" :aria-valuenow="prevSize" @keyup="onGutterKeyUp" @keydown="onGutterKeyDown($event, i)" v-bind="ptm('gutterhandler')"></div>
             </div>
         </template>
     </div>
 </template>
 
 <script>
+import ComponentBase from 'primevue/base';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
 
 export default {
     name: 'Splitter',
+    extends: ComponentBase,
     emits: ['resizestart', 'resizeend'],
     props: {
         layout: {

components/lib/splitterpanel/SplitterPanel.d.ts

@@ -10,6 +10,33 @@
 import { VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type SplitterPanelPassThroughOptionType = SplitterPanelPassThroughAttributes | ((options: SplitterPanelPassThroughMethodOptions) => SplitterPanelPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface SplitterPanelPassThroughMethodOptions {
+    props: SplitterPanelProps;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link PanelProps.pt}
+ */
+export interface SplitterPanelPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: SplitterPanelPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface SplitterPanelPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in SplitterPanel component.
  */
@@ -22,6 +49,11 @@ export interface SplitterPanelProps {
      * Minimum size of the element relative to 100%.
      */
     minSize?: number | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {SplitterPanelPassThroughOptions}
+     */
+    pt?: SplitterPanelPassThroughOptions;
 }
 
 /**

components/lib/splitterpanel/SplitterPanel.vue

@@ -1,12 +1,15 @@
 <template>
-    <div ref="container" :class="containerClass">
+    <div ref="container" :class="containerClass" v-bind="ptm('root')">
         <slot></slot>
     </div>
 </template>
 
 <script>
+import ComponentBase from 'primevue/base';
+
 export default {
     name: 'SplitterPanel',
+    extends: ComponentBase,
     props: {
         size: {
             type: Number,

components/lib/tabpanel/TabPanel.d.ts

@@ -8,8 +8,50 @@
  *
  */
 import { AnchorHTMLAttributes, HTMLAttributes, LiHTMLAttributes, VNode } from 'vue';
+import { TabViewPassThroughOptions } from '../tabview';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type TabPanelPassThroughOptionType = TabPanelPassThroughAttributes | ((options: TabPanelPassThroughMethodOptions) => TabPanelPassThroughAttributes) | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface TabPanelPassThroughMethodOptions {
+    props: TabPanelProps;
+    parent: TabViewPassThroughOptions;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TabPanelProps.pt}
+ */
+export interface TabPanelPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TabPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header's DOM element.
+     */
+    header?: TabPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the header action's DOM element.
+     */
+    headeraction?: TabPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the title's DOM element.
+     */
+    headertitle?: TabPanelPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    content?: TabPanelPassThroughOptionType;
+}
+
+export interface TabPanelPassThroughAttributes {
+    [key: string]: any;
+}
+
 /**
  * Defines valid properties in TabPanel component.
  */
@@ -20,30 +62,37 @@ export interface TabPanelProps {
     header?: string | undefined;
     /**
      * Inline style of the tab header.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     headerStyle?: any;
     /**
      * Style class of the tab header.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     headerClass?: any;
     /**
      * Uses to pass all properties of the HTMLLiElement to the tab header.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     headerProps?: LiHTMLAttributes | undefined;
     /**
      * Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     headerActionProps?: AnchorHTMLAttributes | undefined;
     /**
      * Inline style of the tab content.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     contentStyle?: any;
     /**
      * Style class of the tab content.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     contentClass?: any;
     /**
      * Uses to pass all properties of the HTMLDivElement to the tab content.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     contentProps?: HTMLAttributes | undefined;
     /**
@@ -51,6 +100,11 @@ export interface TabPanelProps {
      * @defaultValue false
      */
     disabled?: boolean | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TabPanelPassThroughOptions}
+     */
+    pt?: TabPanelPassThroughOptions;
 }
 /**
  * Defines valid slots in TabPanel slots.

components/lib/tabpanel/TabPanel.vue

@@ -3,8 +3,10 @@
 </template>
 
 <script>
+import ComponentBase from 'primevue/base';
 export default {
     name: 'TabPanel',
+    extends: ComponentBase,
     props: {
         header: null,
         headerStyle: null,

components/lib/tabview/TabView.d.ts

@@ -10,6 +10,8 @@
 import { ButtonHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
+export declare type TabViewPassThroughOptionType = TabViewPassThroughAttributes | ((options: { props: TabViewProps; state: TabViewState }) => TabViewPassThroughAttributes) | null | undefined;
+
 /**
  * Custom tab change event.
  * @see {@link TabViewEmits['tab-change']}
@@ -32,6 +34,88 @@ export interface TabViewChangeEvent {
  */
 export interface TabViewClickEvent extends TabViewChangeEvent {}
 
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link TabViewProps.pt}
+ */
+export interface TabViewPassThroughOptions {
+    /**
+     * Uses to pass attributes to the root's DOM element.
+     */
+    root?: TabViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the nav container's DOM element.
+     */
+    navcontainer?: TabViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the nav content's DOM element.
+     */
+    navcontent?: TabViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list's DOM element.
+     */
+    nav?: TabViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the list items' DOM element.
+     */
+    tabheader?: TabViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the inkbar's DOM element.
+     */
+    inkbar?: TabViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the previous button's DOM element.
+     */
+    prevbutton?: TabViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the previous button icon's DOM element.
+     */
+    previcon?: TabViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the nex button's DOM element.
+     */
+    nextbutton?: TabViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the next button icon's DOM element.
+     */
+    nexticon?: TabViewPassThroughOptionType;
+    /**
+     * Uses to pass attributes to the panel's DOM element.
+     */
+    panelcontainer?: TabViewPassThroughOptionType;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface TabViewPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in TabView component.
+ */
+export interface TabViewState {
+    /**
+     * Current active index state.
+     */
+    d_activeIndex: number;
+    /**
+     * Unique id for the TabView component.
+     */
+    id: string;
+    /**
+     * Current state of previous button.
+     * @defaultValue true
+     */
+    isPrevButtonDisabled: boolean;
+    /**
+     * Current state of the next button.
+     * @defaultValue false
+     */
+    isNextButtonDisabled: boolean;
+}
+
 /**
  * Defines valid properties in TabView component.
  */
@@ -63,12 +147,19 @@ export interface TabViewProps {
     selectOnFocus?: boolean | undefined;
     /**
      * Uses to pass all properties of the HTMLButtonElement to the previous button.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     previousButtonProps?: ButtonHTMLAttributes | undefined;
     /**
      * Uses to pass all properties of the HTMLButtonElement to the next button.
+     * @deprecated since v3.26.0. Use 'pt' property instead.
      */
     nextButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Uses to pass attributes to DOM elements inside the component.
+     * @type {TabViewPassThroughOptions}
+     */
+    pt?: TabViewPassThroughOptions;
 }
 
 /**
@@ -79,6 +170,14 @@ export interface TabViewSlots {
      * Default slot to detect TabPanel components.
      */
     default(): VNode[];
+    /**
+     * Previous button icon template for the scrollable component.
+     */
+    previcon(): VNode[];
+    /**
+     * Next button icon template for the scrollable component.
+     */
+    nexticon(): VNode[];
 }
 
 /**

components/lib/tabview/TabView.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :class="contentClasses">
+    <div :class="contentClasses" v-bind="ptm('root')">
-        <div class="p-tabview-nav-container">
+        <div class="p-tabview-nav-container" v-bind="ptm('navcontainer')">
             <button
                 v-if="scrollable && !isPrevButtonDisabled"
                 ref="prevBtn"
@@ -10,13 +10,23 @@
                 :tabindex="tabindex"
                 :aria-label="prevButtonAriaLabel"
                 @click="onPrevButtonClick"
-                v-bind="previousButtonProps"
+                v-bind="{ ...previousButtonProps, ...ptm('prevbutton') }"
             >
-                <span class="pi pi-chevron-left" aria-hidden="true"></span>
+                <slot name="previcon">
+                    <span class="pi pi-chevron-left" aria-hidden="true" v-bind="ptm('previcon')"></span>
+                </slot>
             </button>
-            <div ref="content" class="p-tabview-nav-content" @scroll="onScroll">
+            <div ref="content" class="p-tabview-nav-content" @scroll="onScroll" v-bind="ptm('navcontent')">
-                <ul ref="nav" class="p-tabview-nav" role="tablist">
+                <ul ref="nav" class="p-tabview-nav" role="tablist" v-bind="ptm('nav')">
-                    <li v-for="(tab, i) of tabs" :key="getKey(tab, i)" :style="getTabProp(tab, 'headerStyle')" :class="getTabHeaderClass(tab, i)" role="presentation" :data-index="i" v-bind="getTabProp(tab, 'headerProps')">
+                    <li
+                        v-for="(tab, i) of tabs"
+                        :key="getKey(tab, i)"
+                        :style="getTabProp(tab, 'headerStyle')"
+                        :class="getTabHeaderClass(tab, i)"
+                        role="presentation"
+                        :data-index="i"
+                        v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'root'), ...getTabPT(tab, 'header') }"
+                    >
                         <a
                             :id="getTabHeaderActionId(i)"
                             v-ripple
@@ -28,13 +38,13 @@
                             :aria-controls="getTabContentId(i)"
                             @click="onTabClick($event, tab, i)"
                             @keydown="onTabKeyDown($event, tab, i)"
-                            v-bind="getTabProp(tab, 'headerActionProps')"
+                            v-bind="{ ...getTabProp(tab, 'headerActionProps'), ...getTabPT(tab, 'headeraction') }"
                         >
-                            <span v-if="tab.props && tab.props.header" class="p-tabview-title">{{ tab.props.header }}</span>
+                            <span v-if="tab.props && tab.props.header" class="p-tabview-title" v-bind="getTabPT(tab, 'headertitle')">{{ tab.props.header }}</span>
                             <component v-if="tab.children && tab.children.header" :is="tab.children.header"></component>
                         </a>
                     </li>
-                    <li ref="inkbar" class="p-tabview-ink-bar" role="presentation" aria-hidden="true"></li>
+                    <li ref="inkbar" class="p-tabview-ink-bar" role="presentation" aria-hidden="true" v-bind="ptm('inkbar')"></li>
                 </ul>
             </div>
             <button
@@ -46,12 +56,14 @@
                 :tabindex="tabindex"
                 :aria-label="nextButtonAriaLabel"
                 @click="onNextButtonClick"
-                v-bind="nextButtonProps"
+                v-bind="{ ...nextButtonProps, ...ptm('nextbutton') }"
             >
-                <span class="pi pi-chevron-right" aria-hidden="true"></span>
+                <slot name="nexticon">
+                    <span class="pi pi-chevron-right" aria-hidden="true" v-bind="ptm('nexticon')"></span>
+                </slot>
             </button>
         </div>
-        <div class="p-tabview-panels">
+        <div class="p-tabview-panels" v-bind="ptm('panelcontainer')">
             <template v-for="(tab, i) of tabs" :key="getKey(tab, i)">
                 <div
                     v-if="lazy ? isTabActive(i) : true"
@@ -60,7 +72,7 @@
                     :class="getTabContentClass(tab)"
                     role="tabpanel"
                     :aria-labelledby="getTabHeaderActionId(i)"
-                    v-bind="getTabProp(tab, 'contentProps')"
+                    v-bind="{ ...getTabProp(tab, 'contentProps'), ...getTabPT(tab, 'root'), ...getTabPT(tab, 'content') }"
                 >
                     <component :is="tab"></component>
                 </div>
@@ -70,11 +82,13 @@
 </template>
 
 <script>
+import ComponentBase from 'primevue/base';
 import Ripple from 'primevue/ripple';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
 
 export default {
     name: 'TabView',
+    extends: ComponentBase,
     emits: ['update:activeIndex', 'tab-change', 'tab-click'],
     props: {
         activeIndex: {
@@ -152,6 +166,15 @@ export default {
         getTabContentId(index) {
             return `${this.id}_${index}_content`;
         },
+        getTabPT(tab, key) {
+            return this.ptmo(this.getTabProp(tab, 'pt'), key, {
+                props: tab.props,
+                parent: {
+                    props: this.$props,
+                    state: this.$data
+                }
+            });
+        },
         onScroll(event) {
             this.scrollable && this.updateButtonState();
 

components/lib/toolbar/Toolbar.d.ts

@@ -10,6 +10,45 @@
 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 +57,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 p-component" role="toolbar" :aria-labelledby="ariaLabelledby" v-bind="ptm('root')">
-        <div class="p-toolbar-group-start p-toolbar-group-left">
+        <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,

doc/common/apidoc/index.json

@@ -17407,6 +17407,90 @@
                         }
                     ]
                 },
+                "PanelPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "PanelPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "PanelProps.pt",
+                    "props": [
+                        {
+                            "name": "content",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the content's DOM element."
+                        },
+                        {
+                            "name": "header",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the header's DOM element."
+                        },
+                        {
+                            "name": "headericon",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the headericon's DOM element."
+                        },
+                        {
+                            "name": "icons",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the title's DOM element."
+                        },
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "title",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the title's DOM element."
+                        },
+                        {
+                            "name": "toggleablecontent",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the toggleablecontent's DOM element."
+                        },
+                        {
+                            "name": "toggler",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelPassThroughOptionType",
+                            "default": "",
+                            "description": "Uses to pass attributes to the toggler's DOM element."
+                        }
+                    ],
+                    "methods": []
+                },
                 "PanelProps": {
                     "description": "Defines valid properties in Panel component.",
                     "relatedProp": "",
@@ -17427,6 +17511,14 @@
                             "default": "",
                             "description": "Header text of the panel."
                         },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PanelPassThroughOptions",
+                            "default": "",
+                            "description": "Uses to pass attributes to DOM elements inside the component."
+                        },
                         {
                             "name": "toggleButtonProps",
                             "optional": true,
@@ -17463,6 +17555,19 @@
                             "returnType": "VNode<RendererNode, RendererElement, Object>[]",
                             "description": "Custom header template."
                         },
+                        {
+                            "name": "headericon",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n  \t <b>collapsed</b>: boolean, // Collapsed state as a boolean\n  }",
+                                    "description": "header icon slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom header icon template of panel."
+                        },
                         {
                             "name": "icons",
                             "parameters": [],
@@ -17471,6 +17576,21 @@
                         }
                     ]
                 },
+                "PanelState": {
+                    "description": "Defines current inline states in Panel component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "d_collapsed",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "Current collapsed state as a boolean"
+                        }
+                    ],
+                    "methods": []
+                },
                 "PanelToggleEvent": {
                     "description": "Custom toggle event.",
                     "relatedProp": "PanelEmits.toggle",
@@ -17495,6 +17615,14 @@
                     "methods": []
                 }
             }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "PanelPassThroughOptionType": {
+                    "values": "PanelPassThroughAttributes | Function | null | undefined"
+                }
+            }
         }
     },
     "panelmenu": {

nuxt.config.js

@@ -85,6 +85,7 @@ export default defineNuxtConfig({
                 'primevue/utils': path.resolve(__dirname, './components/lib/utils/Utils.js'),
                 'primevue/api': path.resolve(__dirname, './components/lib/api/Api.js'),
                 'primevue/portal': path.resolve(__dirname, './components/lib/portal/Portal.vue'),
+                'primevue/base': path.resolve(__dirname, './components/lib/base/ComponentBase.vue'),
                 'primevue/button': path.resolve(__dirname, './components/lib/button/Button.vue'),
                 'primevue/inputtext': path.resolve(__dirname, './components/lib/inputtext/InputText.vue'),
                 'primevue/dialog': path.resolve(__dirname, './components/lib/dialog/Dialog.vue'),

vitest.config.js

@@ -23,6 +23,7 @@ export default {
             'primevue/utils': path.resolve(__dirname, './components/lib/utils/Utils.js'),
             'primevue/api': path.resolve(__dirname, './components/lib/api/Api.js'),
             'primevue/portal': path.resolve(__dirname, './components/lib/portal/Portal.vue'),
+            'primevue/base': path.resolve(__dirname, './components/lib/base/ComponentBase.vue'),
             'primevue/button': path.resolve(__dirname, './components/lib/button/Button.vue'),
             'primevue/inputtext': path.resolve(__dirname, './components/lib/inputtext/InputText.vue'),
             'primevue/dialog': path.resolve(__dirname, './components/lib/dialog/Dialog.vue'),