From 4836654f7bcae54b75282ea8da29b52fcaa0a504 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Tue, 30 Jan 2024 14:35:32 +0000
Subject: [PATCH] Fixed #5179 - Improve `data-pc-` structure in components

---
 components/lib/autocomplete/AutoComplete.vue  | 16 +----
 components/lib/avatar/Avatar.vue              |  2 +-
 components/lib/avatargroup/AvatarGroup.vue    |  2 +-
 components/lib/badge/Badge.vue                |  2 +-
 .../lib/basecomponent/BaseComponent.vue       | 20 +++++--
 components/lib/basedirective/BaseDirective.js | 12 ++--
 components/lib/blockui/BlockUI.vue            |  2 -
 components/lib/breadcrumb/Breadcrumb.vue      |  2 +-
 components/lib/button/Button.vue              |  2 +-
 components/lib/calendar/Calendar.vue          |  6 +-
 components/lib/card/Card.vue                  |  2 +-
 .../lib/cascadeselect/CascadeSelect.vue       |  2 +-
 components/lib/chart/Chart.vue                |  2 +-
 components/lib/checkbox/Checkbox.vue          |  2 +-
 components/lib/chip/Chip.vue                  |  2 +-
 components/lib/chips/Chips.vue                |  2 +-
 .../lib/confirmdialog/ConfirmDialog.vue       |  8 +--
 components/lib/confirmpopup/ConfirmPopup.vue  | 26 ++------
 components/lib/contextmenu/ContextMenu.vue    |  2 +-
 components/lib/datatable/ColumnFilter.vue     | 17 +-----
 components/lib/datatable/DataTable.vue        |  2 +-
 components/lib/datatable/HeaderCell.vue       |  2 +-
 components/lib/dataview/DataView.vue          |  2 +-
 components/lib/divider/Divider.vue            |  2 +-
 components/lib/dock/Dock.vue                  |  2 +-
 components/lib/dropdown/Dropdown.vue          |  2 +-
 components/lib/editor/Editor.vue              |  2 +-
 components/lib/fieldset/Fieldset.vue          |  2 +-
 components/lib/fileupload/FileUpload.vue      |  8 +--
 components/lib/floatlabel/FloatLabel.vue      |  2 +-
 components/lib/galleria/GalleriaContent.vue   |  1 -
 components/lib/iconfield/IconField.vue        |  2 +-
 components/lib/image/Image.vue                |  2 +-
 components/lib/inplace/Inplace.vue            |  2 +-
 components/lib/inputgroup/InputGroup.vue      |  2 +-
 .../lib/inputgroupaddon/InputGroupAddon.vue   |  2 +-
 components/lib/inputmask/InputMask.vue        |  2 +-
 components/lib/inputnumber/InputNumber.vue    | 29 +--------
 components/lib/inputswitch/InputSwitch.vue    |  2 +-
 components/lib/inputtext/InputText.vue        |  2 +-
 components/lib/knob/Knob.vue                  |  2 +-
 components/lib/listbox/Listbox.vue            |  2 +-
 components/lib/megamenu/MegaMenu.vue          |  2 +-
 components/lib/menu/Menu.vue                  |  2 +-
 components/lib/message/Message.vue            |  2 +-
 components/lib/metergroup/MeterGroup.vue      |  2 +-
 components/lib/multiselect/MultiSelect.vue    |  2 +-
 components/lib/orderlist/OrderList.vue        |  8 +--
 .../lib/paginator/JumpToPageDropdown.vue      |  1 -
 components/lib/paginator/JumpToPageInput.vue  | 12 +---
 components/lib/paginator/Paginator.vue        |  2 +-
 .../lib/paginator/RowsPerPageDropdown.vue     |  1 -
 components/lib/panel/Panel.vue                |  2 +-
 components/lib/panelmenu/PanelMenu.vue        |  2 +-
 components/lib/password/Password.vue          |  2 +-
 components/lib/picklist/PickList.vue          | 60 ++++---------------
 components/lib/progressbar/ProgressBar.vue    |  2 +-
 .../lib/progressspinner/ProgressSpinner.vue   |  2 +-
 components/lib/radiobutton/RadioButton.vue    |  2 +-
 components/lib/rating/Rating.vue              |  2 +-
 components/lib/scrollpanel/ScrollPanel.vue    |  2 +-
 components/lib/scrolltop/ScrollTop.vue        |  2 +-
 components/lib/selectbutton/SelectButton.vue  |  2 +-
 components/lib/skeleton/Skeleton.vue          |  2 +-
 components/lib/slider/Slider.vue              |  2 +-
 components/lib/speeddial/SpeedDial.vue        |  2 +-
 components/lib/splitbutton/SplitButton.vue    |  4 +-
 components/lib/splitter/Splitter.vue          |  2 +-
 .../lib/splitterpanel/SplitterPanel.vue       |  2 +-
 components/lib/steps/Steps.vue                |  2 +-
 components/lib/tabmenu/TabMenu.vue            |  2 +-
 components/lib/tabview/TabView.vue            |  2 +-
 components/lib/tag/Tag.vue                    |  2 +-
 components/lib/terminal/Terminal.vue          |  2 +-
 components/lib/textarea/Textarea.vue          |  2 +-
 components/lib/tieredmenu/TieredMenu.vue      |  2 +-
 components/lib/timeline/Timeline.vue          |  2 +-
 components/lib/togglebutton/ToggleButton.vue  |  2 +-
 components/lib/toolbar/Toolbar.vue            |  2 +-
 components/lib/tree/Tree.vue                  |  2 +-
 components/lib/treeselect/TreeSelect.vue      |  3 +-
 components/lib/treetable/HeaderCell.vue       |  2 +-
 components/lib/treetable/TreeTable.vue        |  4 +-
 .../lib/tristatecheckbox/TriStateCheckbox.vue |  2 +-
 .../lib/virtualscroller/VirtualScroller.vue   |  2 +-
 85 files changed, 128 insertions(+), 242 deletions(-)

diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue
index 7fe4e1064..0702b106f 100755
--- a/components/lib/autocomplete/AutoComplete.vue
+++ b/components/lib/autocomplete/AutoComplete.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick" v-bind="ptm('root')" data-pc-name="autocomplete">
+    <div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick" v-bind="ptm('root')">
         <input
             v-if="!multiple"
             ref="focusInput"
@@ -91,19 +91,7 @@
             <i v-if="loadingIcon" :class="['pi-spin', cx('loadingIcon'), loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
             <SpinnerIcon v-else :class="[cx('loadingIcon'), loadingIcon]" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
         </slot>
-        <Button
-            v-if="dropdown"
-            ref="dropdownButton"
-            type="button"
-            tabindex="-1"
-            :class="[cx('dropdownButton'), dropdownClass]"
-            :disabled="disabled"
-            aria-hidden="true"
-            @click="onDropdownClick"
-            :unstyled="unstyled"
-            :pt="ptm('dropdownButton')"
-            data-pc-section="dropdownbutton"
-        >
+        <Button v-if="dropdown" ref="dropdownButton" type="button" tabindex="-1" :class="[cx('dropdownButton'), dropdownClass]" :disabled="disabled" aria-hidden="true" @click="onDropdownClick" :unstyled="unstyled" :pt="ptm('dropdownButton')">
             <template #icon>
                 <slot name="dropdownicon" :class="dropdownIcon">
                     <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="dropdownIcon" v-bind="ptm('dropdownButton')['icon']" data-pc-section="dropdownicon" />
diff --git a/components/lib/avatar/Avatar.vue b/components/lib/avatar/Avatar.vue
index 4f772d63b..8a8a124de 100644
--- a/components/lib/avatar/Avatar.vue
+++ b/components/lib/avatar/Avatar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('root')" data-pc-name="avatar">
+    <div :class="cx('root')" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('root')">
         <slot>
             <span v-if="label" :class="cx('label')" v-bind="ptm('label')">{{ label }}</span>
             <component v-else-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" />
diff --git a/components/lib/avatargroup/AvatarGroup.vue b/components/lib/avatargroup/AvatarGroup.vue
index 7c3313862..a4fb3c572 100644
--- a/components/lib/avatargroup/AvatarGroup.vue
+++ b/components/lib/avatargroup/AvatarGroup.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="avatargroup">
+    <div :class="cx('root')" v-bind="ptm('root')">
         <slot></slot>
     </div>
 </template>
diff --git a/components/lib/badge/Badge.vue b/components/lib/badge/Badge.vue
index e6dbe943a..2ab73d911 100644
--- a/components/lib/badge/Badge.vue
+++ b/components/lib/badge/Badge.vue
@@ -1,5 +1,5 @@
 <template>
-    <span :class="cx('root')" v-bind="ptm('root')" data-pc-name="badge">
+    <span :class="cx('root')" v-bind="ptm('root')">
         <slot>{{ value }}</slot>
     </span>
 </template>
diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue
index 7b0cb4b90..bfcef01f3 100644
--- a/components/lib/basecomponent/BaseComponent.vue
+++ b/components/lib/basecomponent/BaseComponent.vue
@@ -117,18 +117,28 @@ export default {
                 : ObjectUtils.getItemValue(options, params);
         },
         _getPTValue(obj = {}, key = '', params = {}, searchInDefaultPT = true) {
-            const datasetPrefix = 'data-pc-';
             const searchOut = /./g.test(key) && !!params[key.split('.')[0]];
             const { mergeSections = true, mergeProps: useMergeProps = false } = this._getPropValue('ptOptions') || this.$config?.ptOptions || {};
             const global = searchInDefaultPT ? (searchOut ? this._useGlobalPT(this._getPTClassValue, key, params) : this._useDefaultPT(this._getPTClassValue, key, params)) : undefined;
             const self = searchOut ? undefined : this._usePT(this._getPT(obj, this.$name), this._getPTClassValue, key, { ...params, global: global || {} });
-            const datasets = key !== 'transition' && {
-                ...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(this.$.type.name) }),
-                [`${datasetPrefix}section`]: ObjectUtils.toFlatCase(key)
-            };
+            const datasets = this._getPTDatasets(key);
 
             return mergeSections || (!mergeSections && self) ? (useMergeProps ? this._mergeProps(useMergeProps, global, self, datasets) : { ...global, ...self, ...datasets }) : { ...self, ...datasets };
         },
+        _getPTDatasets(key = '') {
+            const datasetPrefix = 'data-pc-';
+            const isExtended = key === 'root' && ObjectUtils.isNotEmpty(this.pt?.['data-pc-section']);
+
+            return (
+                key !== 'transition' && {
+                    ...(key === 'root' && {
+                        [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(isExtended ? this.pt?.['data-pc-section'] : this.$.type.name),
+                        ...(isExtended && { [`${datasetPrefix}extend`]: ObjectUtils.toFlatCase(this.$.type.name) })
+                    }),
+                    [`${datasetPrefix}section`]: ObjectUtils.toFlatCase(key)
+                }
+            );
+        },
         _getPTClassValue(...args) {
             const value = this._getOptionValue(...args);
 
diff --git a/components/lib/basedirective/BaseDirective.js b/components/lib/basedirective/BaseDirective.js
index 27b43cdba..b4c6b17bf 100644
--- a/components/lib/basedirective/BaseDirective.js
+++ b/components/lib/basedirective/BaseDirective.js
@@ -22,16 +22,20 @@ const BaseDirective = {
             return ObjectUtils.isString(value) || ObjectUtils.isArray(value) ? { class: value } : value;
         };
 
-        const datasetPrefix = 'data-pc-';
         const { mergeSections = true, mergeProps: useMergeProps = false } = instance.binding?.value?.ptOptions || instance.$config?.ptOptions || {};
         const global = searchInDefaultPT ? BaseDirective._useDefaultPT(instance, instance.defaultPT(), getValue, key, params) : undefined;
         const self = BaseDirective._usePT(instance, BaseDirective._getPT(obj, instance.$name), getValue, key, { ...params, global: global || {} });
-        const datasets = {
+        const datasets = BaseDirective._getPTDatasets(instance, key);
+
+        return mergeSections || (!mergeSections && self) ? (useMergeProps ? BaseDirective._mergeProps(instance, useMergeProps, global, self, datasets) : { ...global, ...self, ...datasets }) : { ...self, ...datasets };
+    },
+    _getPTDatasets(instance = {}, key = '') {
+        const datasetPrefix = 'data-pc-';
+
+        return {
             ...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.toFlatCase(instance.$name) }),
             [`${datasetPrefix}section`]: ObjectUtils.toFlatCase(key)
         };
-
-        return mergeSections || (!mergeSections && self) ? (useMergeProps ? BaseDirective._mergeProps(instance, useMergeProps, global, self, datasets) : { ...global, ...self, ...datasets }) : { ...self, ...datasets };
     },
     _getPT: (pt, key = '', callback) => {
         const getValue = (value) => {
diff --git a/components/lib/blockui/BlockUI.vue b/components/lib/blockui/BlockUI.vue
index 0464f271d..2cf65731d 100755
--- a/components/lib/blockui/BlockUI.vue
+++ b/components/lib/blockui/BlockUI.vue
@@ -37,7 +37,6 @@ export default {
                 styleClass += ' p-blockui-document';
 
                 this.mask = DomHandler.createElement('div', {
-                    'data-pc-section': 'mask',
                     style: {
                         position: 'fixed',
                         top: '0',
@@ -54,7 +53,6 @@ export default {
                 document.activeElement.blur();
             } else {
                 this.mask = DomHandler.createElement('div', {
-                    'data-pc-section': 'mask',
                     style: {
                         position: 'absolute',
                         top: '0',
diff --git a/components/lib/breadcrumb/Breadcrumb.vue b/components/lib/breadcrumb/Breadcrumb.vue
index cb3ecd280..1ec7cb97d 100755
--- a/components/lib/breadcrumb/Breadcrumb.vue
+++ b/components/lib/breadcrumb/Breadcrumb.vue
@@ -1,5 +1,5 @@
 <template>
-    <nav :class="cx('root')" v-bind="ptm('root')" data-pc-name="breadcrumb">
+    <nav :class="cx('root')" v-bind="ptm('root')">
         <ol :class="cx('menu')" v-bind="ptm('menu')">
             <BreadcrumbItem v-if="home" :item="home" :class="cx('home')" :templates="$slots" :pt="pt" :unstyled="unstyled" v-bind="ptm('home')" />
             <template v-for="(item, i) of model" :key="item.label + '_' + i">
diff --git a/components/lib/button/Button.vue b/components/lib/button/Button.vue
index 59bed7278..83757455f 100755
--- a/components/lib/button/Button.vue
+++ b/components/lib/button/Button.vue
@@ -1,5 +1,5 @@
 <template>
-    <button v-ripple :class="cx('root')" type="button" :aria-label="defaultAriaLabel" :disabled="disabled" v-bind="getPTOptions('root')" data-pc-name="button" :data-pc-severity="severity">
+    <button v-ripple :class="cx('root')" type="button" :aria-label="defaultAriaLabel" :disabled="disabled" v-bind="getPTOptions('root')" :data-pc-severity="severity">
         <slot>
             <slot v-if="loading" name="loadingicon" :class="[cx('loadingIcon'), cx('icon')]">
                 <span v-if="loadingIcon" :class="[cx('loadingIcon'), cx('icon'), loadingIcon]" v-bind="ptm('loadingIcon')" />
diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
index 428c37583..30c8c9c5d 100755
--- a/components/lib/calendar/Calendar.vue
+++ b/components/lib/calendar/Calendar.vue
@@ -1,5 +1,5 @@
 <template>
-    <span ref="container" :id="id" :class="cx('root')" :style="sx('root')" v-bind="ptm('root')" data-pc-name="calendar">
+    <span ref="container" :id="id" :class="cx('root')" :style="sx('root')" v-bind="ptm('root')">
         <input
             v-if="!inline"
             :ref="inputRef"
@@ -39,7 +39,6 @@
             :aria-controls="panelId"
             :unstyled="unstyled"
             :pt="ptm('dropdownButton')"
-            data-pc-section="dropdownbutton"
         >
             <template #icon>
                 <slot name="dropdownicon" :class="icon">
@@ -486,7 +485,6 @@
                             @keydown="onContainerButtonKeydown"
                             :unstyled="unstyled"
                             :pt="ptm('todayButton')"
-                            data-pc-section="todaybutton"
                             data-pc-group-section="button"
                         />
                         <CalendarButton
@@ -497,7 +495,6 @@
                             @keydown="onContainerButtonKeydown"
                             :unstyled="unstyled"
                             :pt="ptm('clearButton')"
-                            data-pc-section="clearbutton"
                             data-pc-group-section="button"
                         />
                     </div>
@@ -1691,7 +1688,6 @@ export default {
                 let styleClass = 'p-datepicker-mask p-datepicker-mask-scrollblocker p-component-overlay p-component-overlay-enter';
 
                 this.mask = DomHandler.createElement('div', {
-                    'data-pc-section': 'datepickermask',
                     class: !this.isUnstyled && styleClass,
                     'p-bind': this.ptm('datepickermask')
                 });
diff --git a/components/lib/card/Card.vue b/components/lib/card/Card.vue
index 7b6f94a31..4052ca48c 100755
--- a/components/lib/card/Card.vue
+++ b/components/lib/card/Card.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="card">
+    <div :class="cx('root')" v-bind="ptm('root')">
         <div v-if="$slots.header" :class="cx('header')" v-bind="ptm('header')">
             <slot name="header"></slot>
         </div>
diff --git a/components/lib/cascadeselect/CascadeSelect.vue b/components/lib/cascadeselect/CascadeSelect.vue
index 52efcf321..732879c2a 100644
--- a/components/lib/cascadeselect/CascadeSelect.vue
+++ b/components/lib/cascadeselect/CascadeSelect.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick($event)" v-bind="ptm('root')" data-pc-name="cascadeselect">
+    <div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick($event)" v-bind="ptm('root')">
         <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input
                 ref="focusInput"
diff --git a/components/lib/chart/Chart.vue b/components/lib/chart/Chart.vue
index 4c326e593..f77c7deb9 100755
--- a/components/lib/chart/Chart.vue
+++ b/components/lib/chart/Chart.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" :style="sx('root')" v-bind="ptm('root')" data-pc-name="chart">
+    <div :class="cx('root')" :style="sx('root')" v-bind="ptm('root')">
         <canvas ref="canvas" :width="width" :height="height" @click="onCanvasClick($event)" v-bind="{ ...canvasProps, ...ptm('canvas') }"></canvas>
     </div>
 </template>
diff --git a/components/lib/checkbox/Checkbox.vue b/components/lib/checkbox/Checkbox.vue
index 6ca78f82e..c85fafb9e 100755
--- a/components/lib/checkbox/Checkbox.vue
+++ b/components/lib/checkbox/Checkbox.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="checkbox" :data-p-highlight="checked" :data-p-disabled="disabled">
+    <div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-highlight="checked" :data-p-disabled="disabled">
         <input
             :id="inputId"
             type="checkbox"
diff --git a/components/lib/chip/Chip.vue b/components/lib/chip/Chip.vue
index 2a6ec0a5d..00ec627cb 100644
--- a/components/lib/chip/Chip.vue
+++ b/components/lib/chip/Chip.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="visible" :class="cx('root')" :aria-label="label" v-bind="ptm('root')" data-pc-name="chip">
+    <div v-if="visible" :class="cx('root')" :aria-label="label" v-bind="ptm('root')">
         <slot>
             <img v-if="image" :src="image" v-bind="ptm('image')" />
             <component v-else-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" v-bind="ptm('icon')" />
diff --git a/components/lib/chips/Chips.vue b/components/lib/chips/Chips.vue
index 8263033c7..feb7ea7cc 100755
--- a/components/lib/chips/Chips.vue
+++ b/components/lib/chips/Chips.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="chips">
+    <div :class="cx('root')" v-bind="ptm('root')">
         <ul
             ref="container"
             :class="cx('container')"
diff --git a/components/lib/confirmdialog/ConfirmDialog.vue b/components/lib/confirmdialog/ConfirmDialog.vue
index d0a4d54f7..5f8140661 100644
--- a/components/lib/confirmdialog/ConfirmDialog.vue
+++ b/components/lib/confirmdialog/ConfirmDialog.vue
@@ -28,17 +28,17 @@
             <component v-else :is="$slots.message" :message="confirmation"></component>
         </template>
         <template v-if="!$slots.container" #footer>
-            <CDButton :label="rejectLabel" :class="[cx('rejectButton'), confirmation.rejectClass]" @click="reject()" :autofocus="autoFocusReject" :unstyled="unstyled" :pt="ptm('rejectButton')" data-pc-name="rejectbutton">
+            <CDButton :label="rejectLabel" :class="[cx('rejectButton'), confirmation.rejectClass]" @click="reject()" :autofocus="autoFocusReject" :unstyled="unstyled" :pt="ptm('rejectButton')">
                 <template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
                     <slot name="rejecticon">
-                        <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-name="rejectbuttonicon" />
+                        <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-section="rejectbuttonicon" />
                     </slot>
                 </template>
             </CDButton>
-            <CDButton :label="acceptLabel" :class="[cx('acceptButton'), confirmation.acceptClass]" @click="accept()" :autofocus="autoFocusAccept" :unstyled="unstyled" :pt="ptm('acceptButton')" data-pc-name="acceptbutton">
+            <CDButton :label="acceptLabel" :class="[cx('acceptButton'), confirmation.acceptClass]" @click="accept()" :autofocus="autoFocusAccept" :unstyled="unstyled" :pt="ptm('acceptButton')">
                 <template v-if="acceptIcon || $slots.accepticon" #icon="iconProps">
                     <slot name="accepticon">
-                        <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" data-pc-name="acceptbuttonicon" />
+                        <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" data-pc-section="acceptbuttonicon" />
                     </slot>
                 </template>
             </CDButton>
diff --git a/components/lib/confirmpopup/ConfirmPopup.vue b/components/lib/confirmpopup/ConfirmPopup.vue
index 2cbbf1eb2..ab9ee7502 100644
--- a/components/lib/confirmpopup/ConfirmPopup.vue
+++ b/components/lib/confirmpopup/ConfirmPopup.vue
@@ -15,35 +15,17 @@
                     </template>
                     <component v-else :is="$slots.message" :message="confirmation"></component>
                     <div :class="cx('footer')" v-bind="ptm('footer')">
-                        <CPButton
-                            :label="rejectLabel"
-                            @click="reject()"
-                            @keydown="onRejectKeydown"
-                            :autofocus="autoFocusReject"
-                            :class="[cx('rejectButton'), confirmation.rejectClass]"
-                            :unstyled="unstyled"
-                            :pt="ptm('rejectButton')"
-                            data-pc-name="rejectbutton"
-                        >
+                        <CPButton :label="rejectLabel" @click="reject()" @keydown="onRejectKeydown" :autofocus="autoFocusReject" :class="[cx('rejectButton'), confirmation.rejectClass]" :unstyled="unstyled" :pt="ptm('rejectButton')">
                             <template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
                                 <slot name="rejecticon">
-                                    <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-name="rejectbuttonicon" />
+                                    <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-section="rejectbuttonicon" />
                                 </slot>
                             </template>
                         </CPButton>
-                        <CPButton
-                            :label="acceptLabel"
-                            @click="accept()"
-                            @keydown="onAcceptKeydown"
-                            :autofocus="autoFocusAccept"
-                            :class="[cx('acceptButton'), confirmation.acceptClass]"
-                            :unstyled="unstyled"
-                            :pt="ptm('acceptButton')"
-                            data-pc-name="acceptbutton"
-                        >
+                        <CPButton :label="acceptLabel" @click="accept()" @keydown="onAcceptKeydown" :autofocus="autoFocusAccept" :class="[cx('acceptButton'), confirmation.acceptClass]" :unstyled="unstyled" :pt="ptm('acceptButton')">
                             <template v-if="acceptIcon || $slots.accepticon" #icon="iconProps">
                                 <slot name="accepticon">
-                                    <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" data-pc-name="acceptbuttonicon" />
+                                    <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" data-pc-section="acceptbuttonicon" />
                                 </slot>
                             </template>
                         </CPButton>
diff --git a/components/lib/contextmenu/ContextMenu.vue b/components/lib/contextmenu/ContextMenu.vue
index b475ed90d..03f15d133 100755
--- a/components/lib/contextmenu/ContextMenu.vue
+++ b/components/lib/contextmenu/ContextMenu.vue
@@ -1,7 +1,7 @@
 <template>
     <Portal :appendTo="appendTo">
         <transition name="p-contextmenu" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
-            <div v-if="visible" :ref="containerRef" :class="cx('root')" v-bind="{ ...$attrs, ...ptm('root') }" data-pc-name="contextmenu">
+            <div v-if="visible" :ref="containerRef" :class="cx('root')" v-bind="{ ...$attrs, ...ptm('root') }">
                 <ContextMenuSub
                     :ref="listRef"
                     :id="id + '_list'"
diff --git a/components/lib/datatable/ColumnFilter.vue b/components/lib/datatable/ColumnFilter.vue
index dbad5fd05..5f32d3855 100644
--- a/components/lib/datatable/ColumnFilter.vue
+++ b/components/lib/datatable/ColumnFilter.vue
@@ -69,7 +69,6 @@
                                 @update:modelValue="onOperatorChange($event)"
                                 :unstyled="unstyled"
                                 :pt="getColumnPT('filterOperatorDropdown')"
-                                data-pc-section="filteroperatordropdown"
                             ></CFDropdown>
                         </div>
                         <div :class="cx('filterConstraints')" v-bind="getColumnPT('filterConstraints')">
@@ -85,7 +84,6 @@
                                     @update:modelValue="onMenuMatchModeChange($event, i)"
                                     :unstyled="unstyled"
                                     :pt="getColumnPT('filterMatchModeDropdown')"
-                                    data-pc-section="filtermatchmodedropdown"
                                 ></CFDropdown>
                                 <component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" :applyFilter="applyFilter" />
                                 <div v-bind="getColumnPT('filterRemove')">
@@ -100,7 +98,6 @@
                                         severity="danger"
                                         size="small"
                                         :pt="getColumnPT('filterRemoveButton')"
-                                        data-pc-section="filterremovebutton"
                                     >
                                         <template #icon="iconProps">
                                             <component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="getColumnPT('filterRemoveButton')['icon']" />
@@ -121,7 +118,6 @@
                                 severity="info"
                                 size="small"
                                 :pt="getColumnPT('filterAddRuleButton')"
-                                data-pc-section="filteraddrulebutton"
                             >
                                 <template #icon="iconProps">
                                     <component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPT('filterAddRuleButton')['icon']" />
@@ -139,21 +135,10 @@
                                 size="small"
                                 outlined
                                 :pt="getColumnPT('filterClearButton')"
-                                data-pc-section="filterclearbutton"
                             ></CFButton>
                             <component v-else :is="filterClearTemplate" :field="field" :filterModel="filters[field]" :filterCallback="clearFilter" />
                             <template v-if="showApplyButton">
-                                <CFButton
-                                    v-if="!filterApplyTemplate"
-                                    type="button"
-                                    :class="cx('filterApplyButton')"
-                                    :label="applyButtonLabel"
-                                    @click="applyFilter()"
-                                    :unstyled="unstyled"
-                                    size="small"
-                                    :pt="getColumnPT('filterApplyButton')"
-                                    data-pc-section="filterapplybutton"
-                                ></CFButton>
+                                <CFButton v-if="!filterApplyTemplate" type="button" :class="cx('filterApplyButton')" :label="applyButtonLabel" @click="applyFilter()" :unstyled="unstyled" size="small" :pt="getColumnPT('filterApplyButton')"></CFButton>
                                 <component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="applyFilter" />
                             </template>
                         </div>
diff --git a/components/lib/datatable/DataTable.vue b/components/lib/datatable/DataTable.vue
index 23ab70991..016a90ae5 100755
--- a/components/lib/datatable/DataTable.vue
+++ b/components/lib/datatable/DataTable.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" data-scrollselectors=".p-datatable-wrapper" v-bind="ptm('root')" data-pc-name="datatable">
+    <div :class="cx('root')" data-scrollselectors=".p-datatable-wrapper" v-bind="ptm('root')">
         <slot></slot>
         <div v-if="loading" :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')">
             <slot v-if="$slots.loading" name="loading"></slot>
diff --git a/components/lib/datatable/HeaderCell.vue b/components/lib/datatable/HeaderCell.vue
index 67bf5ae01..19152ccfd 100644
--- a/components/lib/datatable/HeaderCell.vue
+++ b/components/lib/datatable/HeaderCell.vue
@@ -27,7 +27,7 @@
             <component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
             <span v-if="columnProp('header')" :class="cx('headerTitle')" v-bind="getColumnPT('headerTitle')">{{ columnProp('header') }}</span>
             <span v-if="columnProp('sortable')" v-bind="getColumnPT('sort')">
-                <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sorticon')" data-pc-section="sorticon" />
+                <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sorticon')" />
             </span>
             <span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPT('sortBadge')">{{ getBadgeValue() }}</span>
             <DTHeaderCheckbox
diff --git a/components/lib/dataview/DataView.vue b/components/lib/dataview/DataView.vue
index 3d61d5b2f..9f143d3a3 100755
--- a/components/lib/dataview/DataView.vue
+++ b/components/lib/dataview/DataView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="dataview">
+    <div :class="cx('root')" v-bind="ptm('root')">
         <div v-if="$slots.header" :class="cx('header')" v-bind="ptm('header')">
             <slot name="header"></slot>
         </div>
diff --git a/components/lib/divider/Divider.vue b/components/lib/divider/Divider.vue
index 3ec841b67..42009c3a2 100644
--- a/components/lib/divider/Divider.vue
+++ b/components/lib/divider/Divider.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" :style="sx('root')" role="separator" :aria-orientation="layout" v-bind="ptm('root')" data-pc-name="divider">
+    <div :class="cx('root')" :style="sx('root')" role="separator" :aria-orientation="layout" v-bind="ptm('root')">
         <div v-if="$slots.default" :class="cx('content')" v-bind="ptm('content')">
             <slot></slot>
         </div>
diff --git a/components/lib/dock/Dock.vue b/components/lib/dock/Dock.vue
index c9a6d40fc..7a9cce255 100644
--- a/components/lib/dock/Dock.vue
+++ b/components/lib/dock/Dock.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="containerClass" :style="style" v-bind="ptm('root')" data-pc-name="dock">
+    <div :class="containerClass" :style="style" v-bind="ptm('root')">
         <DockSub :model="model" :templates="$slots" :tooltipOptions="tooltipOptions" :position="position" :menuId="menuId" :aria-label="ariaLabel" :aria-labelledby="ariaLabelledby" :tabindex="tabindex" :pt="pt" :unstyled="unstyled"></DockSub>
     </div>
 </template>
diff --git a/components/lib/dropdown/Dropdown.vue b/components/lib/dropdown/Dropdown.vue
index 719ba3679..ffb3ec855 100755
--- a/components/lib/dropdown/Dropdown.vue
+++ b/components/lib/dropdown/Dropdown.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" :id="id" :class="cx('root')" @click="onContainerClick" v-bind="ptm('root')" data-pc-name="dropdown">
+    <div ref="container" :id="id" :class="cx('root')" @click="onContainerClick" v-bind="ptm('root')">
         <input
             v-if="editable"
             ref="focusInput"
diff --git a/components/lib/editor/Editor.vue b/components/lib/editor/Editor.vue
index 7648d8dde..fe255131f 100755
--- a/components/lib/editor/Editor.vue
+++ b/components/lib/editor/Editor.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="editor">
+    <div :class="cx('root')" v-bind="ptm('root')">
         <div ref="toolbarElement" :class="cx('toolbar')" v-bind="ptm('toolbar')">
             <slot name="toolbar">
                 <span class="ql-formats" v-bind="ptm('formats')">
diff --git a/components/lib/fieldset/Fieldset.vue b/components/lib/fieldset/Fieldset.vue
index f5c7c7d42..02e811465 100755
--- a/components/lib/fieldset/Fieldset.vue
+++ b/components/lib/fieldset/Fieldset.vue
@@ -1,5 +1,5 @@
 <template>
-    <fieldset :class="cx('root')" v-bind="ptm('root')" data-pc-name="fieldset">
+    <fieldset :class="cx('root')" v-bind="ptm('root')">
         <legend :class="cx('legend')" v-bind="ptm('legend')">
             <slot v-if="!toggleable" name="legend">
                 <span :id="ariaId + '_header'" :class="cx('legendtitle')" v-bind="ptm('legendtitle')">{{ legend }}</span>
diff --git a/components/lib/fileupload/FileUpload.vue b/components/lib/fileupload/FileUpload.vue
index 6412221aa..76ce883eb 100755
--- a/components/lib/fileupload/FileUpload.vue
+++ b/components/lib/fileupload/FileUpload.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="isAdvanced" :class="cx('root')" v-bind="ptm('root')" data-pc-name="fileupload">
+    <div v-if="isAdvanced" :class="cx('root')" v-bind="ptm('root')">
         <input ref="fileInput" type="file" @change="onFileSelect" :multiple="multiple" :accept="accept" :disabled="chooseDisabled" v-bind="ptm('input')" />
         <div :class="cx('buttonbar')" v-bind="ptm('buttonbar')">
             <slot name="header" :files="files" :uploadedFiles="uploadedFiles" :chooseCallback="choose" :uploadCallback="upload" :clearCallback="clear">
@@ -9,14 +9,14 @@
                     </slot>
                     <span :class="cx('chooseButtonLabel')" v-bind="ptm('chooseButtonLabel')">{{ chooseButtonLabel }}</span>
                 </span>
-                <FileUploadButton v-if="showUploadButton" :label="uploadButtonLabel" @click="upload" :disabled="uploadDisabled" :unstyled="unstyled" :pt="ptm('uploadButton')" data-pc-section="uploadbutton">
+                <FileUploadButton v-if="showUploadButton" :label="uploadButtonLabel" @click="upload" :disabled="uploadDisabled" :unstyled="unstyled" :pt="ptm('uploadButton')">
                     <template #icon="iconProps">
                         <slot name="uploadicon">
                             <component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, uploadIcon]" aria-hidden="true" v-bind="ptm('uploadButton')['icon']" data-pc-section="uploadbuttonicon" />
                         </slot>
                     </template>
                 </FileUploadButton>
-                <FileUploadButton v-if="showCancelButton" :label="cancelButtonLabel" @click="clear" :disabled="cancelDisabled" :unstyled="unstyled" :pt="ptm('cancelButton')" data-pc-section="cancelbutton">
+                <FileUploadButton v-if="showCancelButton" :label="cancelButtonLabel" @click="clear" :disabled="cancelDisabled" :unstyled="unstyled" :pt="ptm('cancelButton')">
                     <template #icon="iconProps">
                         <slot name="cancelicon">
                             <component :is="cancelIcon ? 'span' : 'TimesIcon'" :class="[iconProps.class, cancelIcon]" aria-hidden="true" v-bind="ptm('cancelButton')['icon']" data-pc-section="cancelbuttonicon" />
@@ -37,7 +37,7 @@
             </div>
         </div>
     </div>
-    <div v-else-if="isBasic" :class="cx('root')" v-bind="ptm('root')" data-pc-name="fileupload">
+    <div v-else-if="isBasic" :class="cx('root')" v-bind="ptm('root')">
         <FileUploadMessage v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('messages')">{{ msg }}</FileUploadMessage>
         <span v-ripple :class="chooseButtonClass" :style="style" @mouseup="onBasicUploaderClick" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" tabindex="0" v-bind="ptm('chooseButton')">
             <slot v-if="!hasFiles || auto" name="uploadicon" :class="cx('uploadIcon')">
diff --git a/components/lib/floatlabel/FloatLabel.vue b/components/lib/floatlabel/FloatLabel.vue
index f31eeeb62..a5c6c23b2 100644
--- a/components/lib/floatlabel/FloatLabel.vue
+++ b/components/lib/floatlabel/FloatLabel.vue
@@ -1,5 +1,5 @@
 <template>
-    <span :class="cx('root')" v-bind="ptm('root')" data-pc-name="floatlabel">
+    <span :class="cx('root')" v-bind="ptm('root')">
         <slot />
     </span>
 </template>
diff --git a/components/lib/galleria/GalleriaContent.vue b/components/lib/galleria/GalleriaContent.vue
index f089885f5..aa0238c94 100755
--- a/components/lib/galleria/GalleriaContent.vue
+++ b/components/lib/galleria/GalleriaContent.vue
@@ -8,7 +8,6 @@
         :aria-label="$attrs.ariaLabel"
         :aria-roledescription="$attrs.ariaRoledescription"
         v-bind="{ ...$attrs.containerProps, ...getPTOptions('root') }"
-        data-pc-name="galleria"
     >
         <button v-if="$attrs.fullScreen" v-ripple autofocus type="button" :class="cx('closeButton')" :aria-label="closeAriaLabel" @click="$emit('mask-hide')" v-bind="getPTOptions('closeButton')">
             <component :is="$attrs.templates['closeicon'] || 'TimesIcon'" :class="cx('closeIcon')" v-bind="getPTOptions('closeIcon')" />
diff --git a/components/lib/iconfield/IconField.vue b/components/lib/iconfield/IconField.vue
index d4a648ecc..6fba393b0 100644
--- a/components/lib/iconfield/IconField.vue
+++ b/components/lib/iconfield/IconField.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="iconfield">
+    <div :class="cx('root')" v-bind="ptm('root')">
         <slot />
     </div>
 </template>
diff --git a/components/lib/image/Image.vue b/components/lib/image/Image.vue
index 47fd87a32..b28b68c4e 100644
--- a/components/lib/image/Image.vue
+++ b/components/lib/image/Image.vue
@@ -1,5 +1,5 @@
 <template>
-    <span :class="containerClass" :style="style" v-bind="ptm('root')" data-pc-name="image">
+    <span :class="containerClass" :style="style" v-bind="ptm('root')">
         <slot name="image" :onError="onError" :errorCallback="onError">
             <img :style="imageStyle" :class="[cx('image'), imageClass]" @error="onError" v-bind="{ ...$attrs, ...ptm('image') }" />
         </slot>
diff --git a/components/lib/inplace/Inplace.vue b/components/lib/inplace/Inplace.vue
index 52d21ce8c..dbf67f09b 100755
--- a/components/lib/inplace/Inplace.vue
+++ b/components/lib/inplace/Inplace.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-focustrap :class="cx('root')" aria-live="polite" v-bind="ptm('root')" data-pc-name="inplace">
+    <div v-focustrap :class="cx('root')" aria-live="polite" v-bind="ptm('root')">
         <div v-if="!d_active" ref="display" :class="cx('display')" :tabindex="$attrs.tabindex || '0'" role="button" @click="open" @keydown.enter="open" v-bind="{ ...displayProps, ...ptm('display') }">
             <slot name="display"></slot>
         </div>
diff --git a/components/lib/inputgroup/InputGroup.vue b/components/lib/inputgroup/InputGroup.vue
index f281102b4..0b9ca67ad 100644
--- a/components/lib/inputgroup/InputGroup.vue
+++ b/components/lib/inputgroup/InputGroup.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="inputgroup">
+    <div :class="cx('root')" v-bind="ptm('root')">
         <slot />
     </div>
 </template>
diff --git a/components/lib/inputgroupaddon/InputGroupAddon.vue b/components/lib/inputgroupaddon/InputGroupAddon.vue
index 8df8a9bba..c7f98a819 100644
--- a/components/lib/inputgroupaddon/InputGroupAddon.vue
+++ b/components/lib/inputgroupaddon/InputGroupAddon.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="inputgroupaddon">
+    <div :class="cx('root')" v-bind="ptm('root')">
         <slot />
     </div>
 </template>
diff --git a/components/lib/inputmask/InputMask.vue b/components/lib/inputmask/InputMask.vue
index 3c3f670b1..1961556bd 100755
--- a/components/lib/inputmask/InputMask.vue
+++ b/components/lib/inputmask/InputMask.vue
@@ -1,5 +1,5 @@
 <template>
-    <input :class="cx('root')" :readonly="readonly" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @keypress="onKeyPress" @paste="onPaste" v-bind="ptm('root', ptmParams)" data-pc-name="inputmask" />
+    <input :class="cx('root')" :readonly="readonly" @input="onInput" @focus="onFocus" @blur="onBlur" @keydown="onKeyDown" @keypress="onKeyPress" @paste="onPaste" v-bind="ptm('root', ptmParams)" />
 </template>
 
 <script>
diff --git a/components/lib/inputnumber/InputNumber.vue b/components/lib/inputnumber/InputNumber.vue
index c1daf2518..a801dfaa4 100755
--- a/components/lib/inputnumber/InputNumber.vue
+++ b/components/lib/inputnumber/InputNumber.vue
@@ -1,5 +1,5 @@
 <template>
-    <span :class="cx('root')" v-bind="ptm('root')" data-pc-name="inputnumber">
+    <span :class="cx('root')" v-bind="ptm('root')">
         <INInputText
             ref="input"
             :id="inputId"
@@ -25,37 +25,16 @@
             v-bind="inputProps"
             :pt="ptm('input')"
             :unstyled="unstyled"
-            data-pc-section="input"
         />
         <span v-if="showButtons && buttonLayout === 'stacked'" :class="cx('buttonGroup')" v-bind="ptm('buttonGroup')">
-            <INButton
-                :class="[cx('incrementButton'), incrementButtonClass]"
-                v-on="upButtonListeners"
-                :disabled="disabled"
-                :tabindex="-1"
-                aria-hidden="true"
-                v-bind="incrementButtonProps"
-                :pt="ptm('incrementButton')"
-                :unstyled="unstyled"
-                data-pc-section="incrementbutton"
-            >
+            <INButton :class="[cx('incrementButton'), incrementButtonClass]" v-on="upButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="incrementButtonProps" :pt="ptm('incrementButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="incrementbuttonicon">
                         <component :is="incrementButtonIcon ? 'span' : 'AngleUpIcon'" :class="incrementButtonIcon" v-bind="ptm('incrementButton')['icon']" data-pc-section="incrementbuttonicon" />
                     </slot>
                 </template>
             </INButton>
-            <INButton
-                :class="[cx('decrementButton'), decrementButtonClass]"
-                v-on="downButtonListeners"
-                :disabled="disabled"
-                :tabindex="-1"
-                aria-hidden="true"
-                v-bind="decrementButtonProps"
-                :pt="ptm('decrementButton')"
-                :unstyled="unstyled"
-                data-pc-section="decrementbutton"
-            >
+            <INButton :class="[cx('decrementButton'), decrementButtonClass]" v-on="downButtonListeners" :disabled="disabled" :tabindex="-1" aria-hidden="true" v-bind="decrementButtonProps" :pt="ptm('decrementButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="decrementbuttonicon">
                         <component :is="decrementButtonIcon ? 'span' : 'AngleDownIcon'" :class="decrementButtonIcon" v-bind="ptm('decrementButton')['icon']" data-pc-section="decrementbuttonicon" />
@@ -73,7 +52,6 @@
             v-bind="incrementButtonProps"
             :pt="ptm('incrementButton')"
             :unstyled="unstyled"
-            data-pc-section="incrementbutton"
         >
             <template #icon>
                 <slot name="incrementbuttonicon">
@@ -91,7 +69,6 @@
             v-bind="decrementButtonProps"
             :pt="ptm('decrementButton')"
             :unstyled="unstyled"
-            data-pc-section="decrementbutton"
         >
             <template #icon>
                 <slot name="decrementbuttonicon">
diff --git a/components/lib/inputswitch/InputSwitch.vue b/components/lib/inputswitch/InputSwitch.vue
index 7fb338e8b..7e2f2583f 100755
--- a/components/lib/inputswitch/InputSwitch.vue
+++ b/components/lib/inputswitch/InputSwitch.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" :style="sx('root')" v-bind="getPTOptions('root')" data-pc-name="inputswitch" :data-p-highlight="checked" :data-p-disabled="disabled">
+    <div :class="cx('root')" :style="sx('root')" v-bind="getPTOptions('root')" :data-p-highlight="checked" :data-p-disabled="disabled">
         <input
             :id="inputId"
             type="checkbox"
diff --git a/components/lib/inputtext/InputText.vue b/components/lib/inputtext/InputText.vue
index 368a66ee4..f66a09a06 100755
--- a/components/lib/inputtext/InputText.vue
+++ b/components/lib/inputtext/InputText.vue
@@ -1,5 +1,5 @@
 <template>
-    <input :class="cx('root')" :value="modelValue" @input="onInput" v-bind="getPTOptions('root')" data-pc-name="inputtext" />
+    <input :class="cx('root')" :value="modelValue" @input="onInput" v-bind="getPTOptions('root')" />
 </template>
 
 <script>
diff --git a/components/lib/knob/Knob.vue b/components/lib/knob/Knob.vue
index b5db4b9f9..be2ed2ffd 100644
--- a/components/lib/knob/Knob.vue
+++ b/components/lib/knob/Knob.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="knob">
+    <div :class="cx('root')" v-bind="ptm('root')">
         <svg
             viewBox="0 0 100 100"
             role="slider"
diff --git a/components/lib/listbox/Listbox.vue b/components/lib/listbox/Listbox.vue
index 5a53b2501..a1791e6ae 100755
--- a/components/lib/listbox/Listbox.vue
+++ b/components/lib/listbox/Listbox.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :id="id" :class="cx('root')" @focusout="onFocusout" v-bind="ptm('root')" data-pc-name="listbox">
+    <div :id="id" :class="cx('root')" @focusout="onFocusout" v-bind="ptm('root')">
         <span
             ref="firstHiddenFocusableElement"
             role="presentation"
diff --git a/components/lib/megamenu/MegaMenu.vue b/components/lib/megamenu/MegaMenu.vue
index 6dacbceeb..da9be84f7 100755
--- a/components/lib/megamenu/MegaMenu.vue
+++ b/components/lib/megamenu/MegaMenu.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :ref="containerRef" :id="id" :class="cx('root')" v-bind="ptm('root')" data-pc-name="megamenu">
+    <div :ref="containerRef" :id="id" :class="cx('root')" v-bind="ptm('root')">
         <div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
             <slot name="start"></slot>
         </div>
diff --git a/components/lib/menu/Menu.vue b/components/lib/menu/Menu.vue
index 4bb75c1c8..8f0c31fae 100644
--- a/components/lib/menu/Menu.vue
+++ b/components/lib/menu/Menu.vue
@@ -1,7 +1,7 @@
 <template>
     <Portal :appendTo="appendTo" :disabled="!popup">
         <transition name="p-connected-overlay" @enter="onEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
-            <div v-if="popup ? overlayVisible : true" :ref="containerRef" :id="id" :class="cx('root')" @click="onOverlayClick" v-bind="{ ...$attrs, ...ptm('root') }" data-pc-name="menu">
+            <div v-if="popup ? overlayVisible : true" :ref="containerRef" :id="id" :class="cx('root')" @click="onOverlayClick" v-bind="{ ...$attrs, ...ptm('root') }">
                 <div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
                     <slot name="start"></slot>
                 </div>
diff --git a/components/lib/message/Message.vue b/components/lib/message/Message.vue
index 9c883773d..337bc0430 100755
--- a/components/lib/message/Message.vue
+++ b/components/lib/message/Message.vue
@@ -1,6 +1,6 @@
 <template>
     <transition name="p-message" appear v-bind="ptm('transition')">
-        <div v-show="visible" :class="cx('root')" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('root')" data-pc-name="message">
+        <div v-show="visible" :class="cx('root')" role="alert" aria-live="assertive" aria-atomic="true" v-bind="ptm('root')">
             <slot v-if="$slots.container" name="container" :onClose="close" :closeCallback="close"></slot>
             <div v-else :class="cx('wrapper')" v-bind="ptm('wrapper')">
                 <slot name="messageicon" class="p-message-icon">
diff --git a/components/lib/metergroup/MeterGroup.vue b/components/lib/metergroup/MeterGroup.vue
index 6ddd51c94..a3e473503 100644
--- a/components/lib/metergroup/MeterGroup.vue
+++ b/components/lib/metergroup/MeterGroup.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" role="meter" :aria-valuemin="min" :aria-valuemax="max" :aria-valuenow="totalPercent" v-bind="ptm('root')" data-pc-name="metergroup">
+    <div :class="cx('root')" role="meter" :aria-valuemin="min" :aria-valuemax="max" :aria-valuenow="totalPercent" v-bind="ptm('root')">
         <slot v-if="labelPosition === 'start'" name="label" :value="value" :totalPercent="totalPercent" :percentages="percentages">
             <MeterGroupLabel :value="value" :labelPosition="labelPosition" :labelOrientation="labelOrientation" :unstyled="unstyled" :pt="pt" />
         </slot>
diff --git a/components/lib/multiselect/MultiSelect.vue b/components/lib/multiselect/MultiSelect.vue
index 3bc9c96c5..fd4cb6107 100755
--- a/components/lib/multiselect/MultiSelect.vue
+++ b/components/lib/multiselect/MultiSelect.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" :class="cx('root')" @click="onContainerClick" v-bind="ptm('root')" data-pc-name="multiselect">
+    <div ref="container" :class="cx('root')" @click="onContainerClick" v-bind="ptm('root')">
         <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input
                 ref="focusInput"
diff --git a/components/lib/orderlist/OrderList.vue b/components/lib/orderlist/OrderList.vue
index 25740b92b..40ebecb4b 100755
--- a/components/lib/orderlist/OrderList.vue
+++ b/components/lib/orderlist/OrderList.vue
@@ -2,28 +2,28 @@
     <div :class="cx('root')" v-bind="ptm('root')">
         <div :class="cx('controls')" v-bind="ptm('controls')">
             <slot name="controlsstart"></slot>
-            <OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="moveUpButtonProps" :pt="ptm('moveUpButton')" :unstyled="unstyled" data-pc-section="moveupbutton">
+            <OLButton type="button" @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="moveUpButtonProps" :pt="ptm('moveUpButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="moveupicon">
                         <AngleUpIcon v-bind="ptm('moveUpButton')['icon']" data-pc-section="moveupicon" />
                     </slot>
                 </template>
             </OLButton>
-            <OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="moveTopButtonProps" :pt="ptm('moveTopButton')" :unstyled="unstyled" data-pc-section="movetopbutton">
+            <OLButton type="button" @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="moveTopButtonProps" :pt="ptm('moveTopButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movetopicon">
                         <AngleDoubleUpIcon v-bind="ptm('moveTopButton')['icon']" data-pc-section="movetopicon" />
                     </slot>
                 </template>
             </OLButton>
-            <OLButton type="button" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="moveDownButtonProps" :pt="ptm('moveDownButton')" :unstyled="unstyled" data-pc-section="movedownbutton">
+            <OLButton type="button" @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="moveDownButtonProps" :pt="ptm('moveDownButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movedownicon">
                         <AngleDownIcon v-bind="ptm('moveDownButton')['icon']" data-pc-section="movedownicon" />
                     </slot>
                 </template>
             </OLButton>
-            <OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="moveBottomButtonProps" :pt="ptm('moveBottomButton')" :unstyled="unstyled" data-pc-section="movebottombutton">
+            <OLButton type="button" @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="moveBottomButtonProps" :pt="ptm('moveBottomButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movebottomicon">
                         <AngleDoubleDownIcon v-bind="ptm('moveBottomButton')['icon']" data-pc-section="movebottomicon" />
diff --git a/components/lib/paginator/JumpToPageDropdown.vue b/components/lib/paginator/JumpToPageDropdown.vue
index 9fa40a0e0..c913e10fd 100644
--- a/components/lib/paginator/JumpToPageDropdown.vue
+++ b/components/lib/paginator/JumpToPageDropdown.vue
@@ -9,7 +9,6 @@
         :disabled="disabled"
         :unstyled="unstyled"
         :pt="ptm('jumpToPageDropdown')"
-        data-pc-section="jumptopagedropdown"
         data-pc-group-section="pagedropdown"
     >
         <template v-if="templates['jumptopagedropdownicon']" #dropdownicon="slotProps">
diff --git a/components/lib/paginator/JumpToPageInput.vue b/components/lib/paginator/JumpToPageInput.vue
index 7cdd9ebfd..f02c82ad5 100644
--- a/components/lib/paginator/JumpToPageInput.vue
+++ b/components/lib/paginator/JumpToPageInput.vue
@@ -1,15 +1,5 @@
 <template>
-    <JTPInput
-        ref="jtpInput"
-        :modelValue="d_page"
-        :class="cx('jumpToPageInput')"
-        :aria-label="inputArialabel"
-        :disabled="disabled"
-        @update:modelValue="onChange"
-        :unstyled="unstyled"
-        :pt="ptm('jumpToPageInput')"
-        data-pc-section="jumptopageinput"
-    ></JTPInput>
+    <JTPInput ref="jtpInput" :modelValue="d_page" :class="cx('jumpToPageInput')" :aria-label="inputArialabel" :disabled="disabled" @update:modelValue="onChange" :unstyled="unstyled" :pt="ptm('jumpToPageInput')"></JTPInput>
 </template>
 
 <script>
diff --git a/components/lib/paginator/Paginator.vue b/components/lib/paginator/Paginator.vue
index bfa5b589e..6eaed1f0e 100755
--- a/components/lib/paginator/Paginator.vue
+++ b/components/lib/paginator/Paginator.vue
@@ -1,6 +1,6 @@
 <template>
     <nav v-if="alwaysShow ? true : pageLinks && pageLinks.length > 1" v-bind="ptm('paginatorWrapper')">
-        <div v-for="(value, key) in templateItems" :key="key" ref="paginator" :class="cx('paginator', { key })" v-bind="ptm('root')" data-pc-name="paginator">
+        <div v-for="(value, key) in templateItems" :key="key" ref="paginator" :class="cx('paginator', { key })" v-bind="ptm('root')">
             <div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
                 <slot name="start" :state="currentState"></slot>
             </div>
diff --git a/components/lib/paginator/RowsPerPageDropdown.vue b/components/lib/paginator/RowsPerPageDropdown.vue
index 7e8bec5c4..c5603efdd 100755
--- a/components/lib/paginator/RowsPerPageDropdown.vue
+++ b/components/lib/paginator/RowsPerPageDropdown.vue
@@ -9,7 +9,6 @@
         :disabled="disabled"
         :unstyled="unstyled"
         :pt="ptm('rowPerPageDropdown')"
-        data-pc-section="rowperpagedropdown"
         data-pc-group-section="pagedropdown"
     >
         <template v-if="templates['rowsperpagedropdownicon']" #dropdownicon="slotProps">
diff --git a/components/lib/panel/Panel.vue b/components/lib/panel/Panel.vue
index c2993fdac..6f41af515 100755
--- a/components/lib/panel/Panel.vue
+++ b/components/lib/panel/Panel.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="panel">
+    <div :class="cx('root')" v-bind="ptm('root')">
         <div :class="cx('header')" v-bind="ptm('header')">
             <slot :id="ariaId + '_header'" name="header" :class="cx('title')">
                 <span v-if="header" :id="ariaId + '_header'" :class="cx('title')" v-bind="ptm('title')">{{ header }}</span>
diff --git a/components/lib/panelmenu/PanelMenu.vue b/components/lib/panelmenu/PanelMenu.vue
index 8abec3f03..68ab9ad6f 100644
--- a/components/lib/panelmenu/PanelMenu.vue
+++ b/components/lib/panelmenu/PanelMenu.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :id="id" :class="cx('root')" v-bind="ptm('root')" data-pc-name="panelmenu">
+    <div :id="id" :class="cx('root')" v-bind="ptm('root')">
         <template v-for="(item, index) of model" :key="getPanelKey(index)">
             <div v-if="isItemVisible(item)" :style="getItemProp(item, 'style')" :class="[cx('panel'), getItemProp(item, 'class')]" v-bind="ptm('panel')">
                 <div
diff --git a/components/lib/password/Password.vue b/components/lib/password/Password.vue
index d41074933..4cdbfe4bc 100755
--- a/components/lib/password/Password.vue
+++ b/components/lib/password/Password.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" :style="sx('root')" v-bind="ptm('root')" data-pc-name="password">
+    <div :class="cx('root')" :style="sx('root')" v-bind="ptm('root')">
         <PInputText
             ref="input"
             :id="inputId"
diff --git a/components/lib/picklist/PickList.vue b/components/lib/picklist/PickList.vue
index a369b07e7..4f8860df6 100755
--- a/components/lib/picklist/PickList.vue
+++ b/components/lib/picklist/PickList.vue
@@ -2,37 +2,28 @@
     <div :class="cx('root')" v-bind="ptm('root')">
         <div v-if="showSourceControls" :class="cx('sourceControls')" v-bind="ptm('sourceControls')" data-pc-group-section="controls">
             <slot name="sourcecontrolsstart"></slot>
-            <PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveUp($event, 0)" v-bind="moveUpButtonProps" :pt="ptm('sourceMoveUpButton')" :unstyled="unstyled" data-pc-section="sourcemoveupbutton">
+            <PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveUp($event, 0)" v-bind="moveUpButtonProps" :pt="ptm('sourceMoveUpButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="moveupicon">
                         <AngleUpIcon v-bind="ptm('sourceMoveUpButton')['icon']" data-pc-section="moveupicon" />
                     </slot>
                 </template>
             </PLButton>
-            <PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveTop($event, 0)" v-bind="moveTopButtonProps" :pt="ptm('sourceMoveTopButton')" :unstyled="unstyled" data-pc-section="sourcemovetopbutton">
+            <PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveTop($event, 0)" v-bind="moveTopButtonProps" :pt="ptm('sourceMoveTopButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movetopicon">
                         <AngleDoubleUpIcon v-bind="ptm('sourceMoveTopButton')['icon']" data-pc-section="movetopicon" />
                     </slot>
                 </template>
             </PLButton>
-            <PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveDown($event, 0)" v-bind="moveDownButtonProps" :pt="ptm('sourceMoveDownButton')" :unstyled="unstyled" data-pc-section="sourcemovedownbutton">
+            <PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveDown($event, 0)" v-bind="moveDownButtonProps" :pt="ptm('sourceMoveDownButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movedownicon">
                         <AngleDownIcon v-bind="ptm('sourceMoveDownButton')['icon']" data-pc-section="movedownicon" />
                     </slot>
                 </template>
             </PLButton>
-            <PLButton
-                :aria-label="moveBottomAriaLabel"
-                :disabled="moveDisabled(0)"
-                type="button"
-                @click="moveBottom($event, 0)"
-                v-bind="moveBottomButtonProps"
-                :pt="ptm('sourceMoveBottomButton')"
-                :unstyled="unstyled"
-                data-pc-section="sourcemovebottombutton"
-            >
+            <PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(0)" type="button" @click="moveBottom($event, 0)" v-bind="moveBottomButtonProps" :pt="ptm('sourceMoveBottomButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movebottomicon">
                         <AngleDoubleDownIcon v-bind="ptm('sourceMoveBottomButton')['icon']" data-pc-section="movebottomicon" />
@@ -85,46 +76,28 @@
         </div>
         <div :class="cx('buttons')" v-bind="ptm('buttons')" data-pc-group-section="controls">
             <slot name="movecontrolsstart"></slot>
-            <PLButton :aria-label="moveToTargetAriaLabel" type="button" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="moveToTargetProps" :pt="ptm('moveToTargetButton')" :unstyled="unstyled" data-pc-section="movetotargetbuton">
+            <PLButton :aria-label="moveToTargetAriaLabel" type="button" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="moveToTargetProps" :pt="ptm('moveToTargetButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movetotargeticon" :viewChanged="viewChanged">
                         <component :is="viewChanged ? 'AngleDownIcon' : 'AngleRightIcon'" v-bind="ptm('moveToTargetButton')['icon']" data-pc-section="movetotargeticon" />
                     </slot>
                 </template>
             </PLButton>
-            <PLButton
-                :aria-label="moveAllToTargetAriaLabel"
-                type="button"
-                @click="moveAllToTarget"
-                :disabled="moveAllDisabled('sourceList')"
-                v-bind="moveAllToTargetProps"
-                :pt="ptm('moveAllToTargetButton')"
-                :unstyled="unstyled"
-                data-pc-section="movealltotargetbuton"
-            >
+            <PLButton :aria-label="moveAllToTargetAriaLabel" type="button" @click="moveAllToTarget" :disabled="moveAllDisabled('sourceList')" v-bind="moveAllToTargetProps" :pt="ptm('moveAllToTargetButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movealltotargeticon" :viewChanged="viewChanged">
                         <component :is="viewChanged ? 'AngleDoubleDownIcon' : 'AngleDoubleRightIcon'" v-bind="ptm('moveAllToTargetButton')['icon']" data-pc-section="movealltotargeticon" />
                     </slot>
                 </template>
             </PLButton>
-            <PLButton :aria-label="moveToSourceAriaLabel" type="button" @click="moveToSource" :disabled="moveDisabled(1)" v-bind="moveToSourceProps" :pt="ptm('moveToSourceButton')" :unstyled="unstyled" data-pc-section="movetosourcebuton">
+            <PLButton :aria-label="moveToSourceAriaLabel" type="button" @click="moveToSource" :disabled="moveDisabled(1)" v-bind="moveToSourceProps" :pt="ptm('moveToSourceButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movetosourceicon" :viewChanged="viewChanged">
                         <component :is="viewChanged ? 'AngleUpIcon' : 'AngleLeftIcon'" v-bind="ptm('moveToSourceButton')['icon']" data-pc-section="movetosourceicon" />
                     </slot>
                 </template>
             </PLButton>
-            <PLButton
-                :aria-label="moveAllToSourceAriaLabel"
-                type="button"
-                @click="moveAllToSource"
-                :disabled="moveAllDisabled('targetList')"
-                v-bind="moveAllToSourceProps"
-                :pt="ptm('moveAllToSourceButton')"
-                data-pc-section="movealltosourcebuton"
-                :unstyled="unstyled"
-            >
+            <PLButton :aria-label="moveAllToSourceAriaLabel" type="button" @click="moveAllToSource" :disabled="moveAllDisabled('targetList')" v-bind="moveAllToSourceProps" :pt="ptm('moveAllToSourceButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movealltosourceicon" :viewChanged="viewChanged">
                         <component :is="viewChanged ? 'AngleDoubleUpIcon' : 'AngleDoubleLeftIcon'" v-bind="ptm('moveAllToSourceButton')['icon']" data-pc-section="movealltosourceicon" />
@@ -178,37 +151,28 @@
         </div>
         <div v-if="showTargetControls" :class="cx('targetControls')" v-bind="ptm('targetControls')" data-pc-group-section="controls">
             <slot name="targetcontrolsstart"></slot>
-            <PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveUp($event, 1)" v-bind="moveUpButtonProps" :pt="ptm('targetMoveUpButton')" :unstyled="unstyled" data-pc-section="targetmoveupbutton">
+            <PLButton :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveUp($event, 1)" v-bind="moveUpButtonProps" :pt="ptm('targetMoveUpButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="moveupicon">
                         <AngleUpIcon v-bind="ptm('targetMoveUpButton')['icon']" data-pc-section="moveupicon" />
                     </slot>
                 </template>
             </PLButton>
-            <PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveTop($event, 1)" v-bind="moveTopButtonProps" :pt="ptm('targetMoveTopButton')" :unstyled="unstyled" data-pc-section="targetmovetopbutton">
+            <PLButton :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveTop($event, 1)" v-bind="moveTopButtonProps" :pt="ptm('targetMoveTopButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movetopicon">
                         <AngleDoubleUpIcon v-bind="ptm('targetMoveTopButton')['icon']" data-pc-section="movetopicon" />
                     </slot>
                 </template>
             </PLButton>
-            <PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveDown($event, 1)" v-bind="moveDownButtonProps" :pt="ptm('targetMoveDownButton')" :unstyled="unstyled" data-pc-section="targetmovedownbutton">
+            <PLButton :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveDown($event, 1)" v-bind="moveDownButtonProps" :pt="ptm('targetMoveDownButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movedownicon">
                         <AngleDownIcon v-bind="ptm('targetMoveDownButton')['icon']" data-pc-section="movedownicon" />
                     </slot>
                 </template>
             </PLButton>
-            <PLButton
-                :aria-label="moveBottomAriaLabel"
-                :disabled="moveDisabled(1)"
-                type="button"
-                @click="moveBottom($event, 1)"
-                v-bind="moveBottomButtonProps"
-                :pt="ptm('targetMoveBottomButton')"
-                :unstyled="unstyled"
-                data-pc-section="targetmovebottombutton"
-            >
+            <PLButton :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(1)" type="button" @click="moveBottom($event, 1)" v-bind="moveBottomButtonProps" :pt="ptm('targetMoveBottomButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movebottomicon">
                         <AngleDoubleDownIcon v-bind="ptm('targetMoveBottomButton')['icon']" data-pc-section="movebottomicon" />
diff --git a/components/lib/progressbar/ProgressBar.vue b/components/lib/progressbar/ProgressBar.vue
index 4b5da78e5..e1342e73c 100755
--- a/components/lib/progressbar/ProgressBar.vue
+++ b/components/lib/progressbar/ProgressBar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div role="progressbar" :class="cx('root')" aria-valuemin="0" :aria-valuenow="value" aria-valuemax="100" v-bind="ptm('root')" data-pc-name="progressbar">
+    <div role="progressbar" :class="cx('root')" aria-valuemin="0" :aria-valuenow="value" aria-valuemax="100" v-bind="ptm('root')">
         <div v-if="determinate" :class="cx('value')" :style="progressStyle" v-bind="ptm('value')">
             <div v-if="value != null && value !== 0 && showValue" :class="cx('label')" v-bind="ptm('label')">
                 <slot>{{ value + '%' }}</slot>
diff --git a/components/lib/progressspinner/ProgressSpinner.vue b/components/lib/progressspinner/ProgressSpinner.vue
index 3baf6ae46..e4b931b99 100755
--- a/components/lib/progressspinner/ProgressSpinner.vue
+++ b/components/lib/progressspinner/ProgressSpinner.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" role="progressbar" v-bind="ptm('root')" data-pc-name="progressspinner">
+    <div :class="cx('root')" role="progressbar" v-bind="ptm('root')">
         <svg :class="cx('spinner')" viewBox="25 25 50 50" :style="svgStyle" v-bind="ptm('spinner')">
             <circle :class="cx('circle')" cx="50" cy="50" r="20" :fill="fill" :stroke-width="strokeWidth" strokeMiterlimit="10" v-bind="ptm('circle')" />
         </svg>
diff --git a/components/lib/radiobutton/RadioButton.vue b/components/lib/radiobutton/RadioButton.vue
index d0ced6201..72c5c0cc8 100755
--- a/components/lib/radiobutton/RadioButton.vue
+++ b/components/lib/radiobutton/RadioButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="radiobutton" :data-p-highlight="checked" :data-p-disabled="disabled">
+    <div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-highlight="checked" :data-p-disabled="disabled">
         <input
             :id="inputId"
             type="radio"
diff --git a/components/lib/rating/Rating.vue b/components/lib/rating/Rating.vue
index aeb069a98..2bda06dab 100755
--- a/components/lib/rating/Rating.vue
+++ b/components/lib/rating/Rating.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="rating">
+    <div :class="cx('root')" v-bind="ptm('root')">
         <div v-if="cancel" :class="cx('cancelItem')" @click="onOptionClick($event, 0)" v-bind="getPTOptions('cancelItem', 0)" :data-p-focused="focusedOptionIndex === 0">
             <span class="p-hidden-accessible" v-bind="ptm('hiddenCancelInputWrapper')" :data-p-hidden-accessible="true">
                 <input
diff --git a/components/lib/scrollpanel/ScrollPanel.vue b/components/lib/scrollpanel/ScrollPanel.vue
index 3023ca487..5f57d43c7 100644
--- a/components/lib/scrollpanel/ScrollPanel.vue
+++ b/components/lib/scrollpanel/ScrollPanel.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="scrollpanel">
+    <div :class="cx('root')" v-bind="ptm('root')">
         <div :class="cx('wrapper')" v-bind="ptm('wrapper')">
             <div ref="content" :id="contentId" :class="cx('content')" @scroll="onScroll" @mouseenter="moveBar" v-bind="ptm('content')">
                 <slot></slot>
diff --git a/components/lib/scrolltop/ScrollTop.vue b/components/lib/scrolltop/ScrollTop.vue
index 423207f59..0340dc9d2 100644
--- a/components/lib/scrolltop/ScrollTop.vue
+++ b/components/lib/scrolltop/ScrollTop.vue
@@ -1,6 +1,6 @@
 <template>
     <transition name="p-scrolltop" appear @enter="onEnter" @after-leave="onAfterLeave" v-bind="ptm('transition')">
-        <button v-if="visible" :ref="containerRef" :class="cx('root')" @click="onClick" type="button" :aria-label="scrollTopAriaLabel" v-bind="ptm('root')" data-pc-name="scrolltop">
+        <button v-if="visible" :ref="containerRef" :class="cx('root')" @click="onClick" type="button" :aria-label="scrollTopAriaLabel" v-bind="ptm('root')">
             <slot name="icon" :class="cx('icon')">
                 <component :is="icon ? 'span' : 'ChevronUpIcon'" :class="[cx('icon'), icon]" v-bind="ptm('icon')" />
             </slot>
diff --git a/components/lib/selectbutton/SelectButton.vue b/components/lib/selectbutton/SelectButton.vue
index 5da48a5f0..d05abd072 100755
--- a/components/lib/selectbutton/SelectButton.vue
+++ b/components/lib/selectbutton/SelectButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" :class="cx('root')" role="group" :aria-labelledby="ariaLabelledby" v-bind="ptm('root')" data-pc-name="selectbutton">
+    <div ref="container" :class="cx('root')" role="group" :aria-labelledby="ariaLabelledby" v-bind="ptm('root')">
         <div
             v-for="(option, i) of options"
             :key="getOptionRenderKey(option)"
diff --git a/components/lib/skeleton/Skeleton.vue b/components/lib/skeleton/Skeleton.vue
index 4b8af8b58..ad2e48874 100644
--- a/components/lib/skeleton/Skeleton.vue
+++ b/components/lib/skeleton/Skeleton.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" :style="[sx('root'), containerStyle]" aria-hidden="true" v-bind="ptm('root')" data-pc-name="skeleton"></div>
+    <div :class="cx('root')" :style="[sx('root'), containerStyle]" aria-hidden="true" v-bind="ptm('root')"></div>
 </template>
 
 <script>
diff --git a/components/lib/slider/Slider.vue b/components/lib/slider/Slider.vue
index a5c87c2ee..c1b8c4e76 100755
--- a/components/lib/slider/Slider.vue
+++ b/components/lib/slider/Slider.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" @click="onBarClick" v-bind="ptm('root')" :data-p-sliding="false" data-pc-name="slider">
+    <div :class="cx('root')" @click="onBarClick" v-bind="ptm('root')" :data-p-sliding="false">
         <span :class="cx('range')" :style="[sx('range'), rangeStyle]" v-bind="ptm('range')"></span>
         <span
             v-if="!range"
diff --git a/components/lib/speeddial/SpeedDial.vue b/components/lib/speeddial/SpeedDial.vue
index e2ca2aded..ba6768c8b 100644
--- a/components/lib/speeddial/SpeedDial.vue
+++ b/components/lib/speeddial/SpeedDial.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :ref="containerRef" :class="containerClass" :style="[style, sx('root')]" v-bind="ptm('root')" data-pc-name="speeddial">
+    <div :ref="containerRef" :class="containerClass" :style="[style, sx('root')]" v-bind="ptm('root')">
         <slot name="button" :onClick="onClick" :toggleCallback="onClick">
             <SDButton
                 type="button"
diff --git a/components/lib/splitbutton/SplitButton.vue b/components/lib/splitbutton/SplitButton.vue
index a712fe05a..ae3135a79 100755
--- a/components/lib/splitbutton/SplitButton.vue
+++ b/components/lib/splitbutton/SplitButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="containerClass" :style="style" v-bind="ptm('root')" data-pc-name="splitbutton" :data-pc-severity="severity">
+    <div :class="containerClass" :style="style" v-bind="ptm('root')" :data-pc-severity="severity">
         <slot>
             <PVSButton
                 type="button"
@@ -15,7 +15,6 @@
                 v-bind="buttonProps"
                 :pt="ptm('button')"
                 :unstyled="unstyled"
-                data-pc-section="button"
             >
                 <template #icon="slotProps">
                     <slot name="icon" :class="slotProps.class">
@@ -44,7 +43,6 @@
             v-bind="menuButtonProps"
             :pt="ptm('menuButton')"
             :unstyled="unstyled"
-            data-pc-section="menubutton"
         >
             <template #icon="slotProps">
                 <slot name="menubuttonicon" :class="slotProps.class">
diff --git a/components/lib/splitter/Splitter.vue b/components/lib/splitter/Splitter.vue
index f9416d5ec..89d308139 100644
--- a/components/lib/splitter/Splitter.vue
+++ b/components/lib/splitter/Splitter.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" :style="sx('root')" :data-p-resizing="false" v-bind="ptm('root', getPTOptions())" data-pc-name="splitter">
+    <div :class="cx('root')" :style="sx('root')" :data-p-resizing="false" v-bind="ptm('root', getPTOptions())">
         <template v-for="(panel, i) of panels" :key="i">
             <component :is="panel" tabindex="-1"></component>
             <div
diff --git a/components/lib/splitterpanel/SplitterPanel.vue b/components/lib/splitterpanel/SplitterPanel.vue
index e970c8c84..84f8316ce 100644
--- a/components/lib/splitterpanel/SplitterPanel.vue
+++ b/components/lib/splitterpanel/SplitterPanel.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" :class="cx('root')" v-bind="ptm('root', getPTOptions)" data-pc-name="splitterpanel">
+    <div ref="container" :class="cx('root')" v-bind="ptm('root', getPTOptions)">
         <slot></slot>
     </div>
 </template>
diff --git a/components/lib/steps/Steps.vue b/components/lib/steps/Steps.vue
index 62e677db1..7b0da69ce 100755
--- a/components/lib/steps/Steps.vue
+++ b/components/lib/steps/Steps.vue
@@ -1,5 +1,5 @@
 <template>
-    <nav :id="id" :class="cx('root')" v-bind="ptm('root')" data-pc-name="steps">
+    <nav :id="id" :class="cx('root')" v-bind="ptm('root')">
         <ol ref="list" :class="cx('menu')" v-bind="ptm('menu')">
             <template v-for="(item, index) of model" :key="label(item) + '_' + index.toString()">
                 <li
diff --git a/components/lib/tabmenu/TabMenu.vue b/components/lib/tabmenu/TabMenu.vue
index f2674c9f7..3566fcb78 100755
--- a/components/lib/tabmenu/TabMenu.vue
+++ b/components/lib/tabmenu/TabMenu.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="tabmenu">
+    <div :class="cx('root')" v-bind="ptm('root')">
         <ul ref="nav" :class="cx('menu')" role="menubar" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('menu')">
             <template v-for="(item, i) of model" :key="label(item) + '_' + i.toString()">
                 <li
diff --git a/components/lib/tabview/TabView.vue b/components/lib/tabview/TabView.vue
index f2470065a..653584ab7 100755
--- a/components/lib/tabview/TabView.vue
+++ b/components/lib/tabview/TabView.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" role="tablist" v-bind="ptm('root')" data-pc-name="tabview">
+    <div :class="cx('root')" role="tablist" v-bind="ptm('root')">
         <div :class="cx('navContainer')" v-bind="ptm('navContainer')">
             <button
                 v-if="scrollable && !isPrevButtonDisabled"
diff --git a/components/lib/tag/Tag.vue b/components/lib/tag/Tag.vue
index 454d06bde..3818e8057 100644
--- a/components/lib/tag/Tag.vue
+++ b/components/lib/tag/Tag.vue
@@ -1,5 +1,5 @@
 <template>
-    <span :class="cx('root')" v-bind="ptm('root')" data-pc-name="tag">
+    <span :class="cx('root')" v-bind="ptm('root')">
         <component v-if="$slots.icon" :is="$slots.icon" :class="cx('icon')" v-bind="ptm('icon')" />
         <span v-else-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></span>
         <slot v-if="value || $slots.default">
diff --git a/components/lib/terminal/Terminal.vue b/components/lib/terminal/Terminal.vue
index 41c2a3364..751cba246 100755
--- a/components/lib/terminal/Terminal.vue
+++ b/components/lib/terminal/Terminal.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" @click="onClick" v-bind="ptm('root')" data-pc-name="terminal">
+    <div :class="cx('root')" @click="onClick" v-bind="ptm('root')">
         <div v-if="welcomeMessage" v-bind="ptm('welcomeMessage')">{{ welcomeMessage }}</div>
         <div :class="cx('content')" v-bind="ptm('content')">
             <div v-for="(command, i) of commands" :key="command.text + i.toString()" v-bind="ptm('commands')">
diff --git a/components/lib/textarea/Textarea.vue b/components/lib/textarea/Textarea.vue
index fdce19fae..8057a650f 100755
--- a/components/lib/textarea/Textarea.vue
+++ b/components/lib/textarea/Textarea.vue
@@ -1,5 +1,5 @@
 <template>
-    <textarea :class="cx('root')" :value="modelValue" @input="onInput" v-bind="ptm('root', ptmParams)" data-pc-name="textarea"></textarea>
+    <textarea :class="cx('root')" :value="modelValue" @input="onInput" v-bind="ptm('root', ptmParams)"></textarea>
 </template>
 
 <script>
diff --git a/components/lib/tieredmenu/TieredMenu.vue b/components/lib/tieredmenu/TieredMenu.vue
index c68b28d07..945ce2377 100755
--- a/components/lib/tieredmenu/TieredMenu.vue
+++ b/components/lib/tieredmenu/TieredMenu.vue
@@ -1,7 +1,7 @@
 <template>
     <Portal :appendTo="appendTo" :disabled="!popup">
         <transition name="p-connected-overlay" @enter="onEnter" @after-enter="onAfterEnter" @leave="onLeave" @after-leave="onAfterLeave" v-bind="ptm('transition')">
-            <div v-if="visible" :ref="containerRef" :id="id" :class="cx('root')" @click="onOverlayClick" v-bind="{ ...$attrs, ...ptm('root') }" data-pc-name="tieredmenu">
+            <div v-if="visible" :ref="containerRef" :id="id" :class="cx('root')" @click="onOverlayClick" v-bind="{ ...$attrs, ...ptm('root') }">
                 <div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
                     <slot name="start"></slot>
                 </div>
diff --git a/components/lib/timeline/Timeline.vue b/components/lib/timeline/Timeline.vue
index 2549ee4be..aab41393c 100644
--- a/components/lib/timeline/Timeline.vue
+++ b/components/lib/timeline/Timeline.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="timeline">
+    <div :class="cx('root')" v-bind="ptm('root')">
         <div v-for="(item, index) of value" :key="getKey(item, index)" :class="cx('event')" v-bind="getPTOptions('event', index)">
             <div :class="cx('opposite', { index })" v-bind="getPTOptions('opposite', index)">
                 <slot name="opposite" :item="item" :index="index"></slot>
diff --git a/components/lib/togglebutton/ToggleButton.vue b/components/lib/togglebutton/ToggleButton.vue
index dffae4f4f..cbd034c8d 100755
--- a/components/lib/togglebutton/ToggleButton.vue
+++ b/components/lib/togglebutton/ToggleButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="togglebutton" :data-p-highlight="active" :data-p-disabled="disabled">
+    <div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-highlight="active" :data-p-disabled="disabled">
         <input
             :id="inputId"
             type="checkbox"
diff --git a/components/lib/toolbar/Toolbar.vue b/components/lib/toolbar/Toolbar.vue
index a5b038413..b54a2ef0e 100755
--- a/components/lib/toolbar/Toolbar.vue
+++ b/components/lib/toolbar/Toolbar.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" role="toolbar" :aria-labelledby="ariaLabelledby" v-bind="ptm('root')" data-pc-name="toolbar">
+    <div :class="cx('root')" role="toolbar" :aria-labelledby="ariaLabelledby" v-bind="ptm('root')">
         <div :class="cx('start')" v-bind="ptm('start')">
             <slot name="start"></slot>
         </div>
diff --git a/components/lib/tree/Tree.vue b/components/lib/tree/Tree.vue
index 71ab4e029..743da7141 100755
--- a/components/lib/tree/Tree.vue
+++ b/components/lib/tree/Tree.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="tree">
+    <div :class="cx('root')" v-bind="ptm('root')">
         <template v-if="loading && loadingMode === 'mask'">
             <div :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')">
                 <slot name="loadingicon" :class="cx('loadingIcon')">
diff --git a/components/lib/treeselect/TreeSelect.vue b/components/lib/treeselect/TreeSelect.vue
index f1127fac5..901705947 100644
--- a/components/lib/treeselect/TreeSelect.vue
+++ b/components/lib/treeselect/TreeSelect.vue
@@ -1,5 +1,5 @@
 <template>
-    <div ref="container" :class="cx('root')" :style="sx('root')" @click="onClick" v-bind="ptm('root')" data-pc-name="treeselect">
+    <div ref="container" :class="cx('root')" :style="sx('root')" @click="onClick" v-bind="ptm('root')">
         <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input
                 ref="focusInput"
@@ -75,7 +75,6 @@
                             :level="0"
                             :unstyled="unstyled"
                             :pt="ptm('tree')"
-                            data-pc-section="tree"
                         >
                             <template v-if="$slots.itemtogglericon" #togglericon="iconProps">
                                 <slot name="itemtogglericon" :node="iconProps.node" :expanded="iconProps.expanded" :class="iconProps.class" />
diff --git a/components/lib/treetable/HeaderCell.vue b/components/lib/treetable/HeaderCell.vue
index 7bd459940..c8d6b6d7b 100644
--- a/components/lib/treetable/HeaderCell.vue
+++ b/components/lib/treetable/HeaderCell.vue
@@ -17,7 +17,7 @@
         <component v-if="column.children && column.children.header" :is="column.children.header" :column="column" />
         <span v-if="columnProp('header')" :class="cx('headerTitle')" v-bind="getColumnPT('headerTitle')">{{ columnProp('header') }}</span>
         <span v-if="columnProp('sortable')" v-bind="getColumnPT('sort')">
-            <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" data-pc-section="sorticon" :class="cx('sortIcon')" v-bind="getColumnPT('sortIcon')" />
+            <component :is="(column.children && column.children.sorticon) || sortableColumnIcon" :sorted="sortState.sorted" :sortOrder="sortState.sortOrder" :class="cx('sortIcon')" v-bind="getColumnPT('sortIcon')" />
         </span>
         <span v-if="isMultiSorted()" :class="cx('sortBadge')" v-bind="getColumnPT('sortBadge')">{{ getMultiSortMetaIndex() + 1 }}</span>
     </th>
diff --git a/components/lib/treetable/TreeTable.vue b/components/lib/treetable/TreeTable.vue
index d4ac84981..014c4c74c 100755
--- a/components/lib/treetable/TreeTable.vue
+++ b/components/lib/treetable/TreeTable.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" data-scrollselectors=".p-treetable-scrollable-body" role="table" v-bind="ptm('root')" data-pc-name="treetable">
+    <div :class="cx('root')" data-scrollselectors=".p-treetable-scrollable-body" role="table" v-bind="ptm('root')">
         <slot></slot>
         <div v-if="loading && loadingMode === 'mask'" :class="cx('loadingWrapper')" v-bind="ptm('loadingWrapper')">
             <div :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')">
@@ -25,7 +25,6 @@
             :alwaysShow="alwaysShowPaginator"
             :unstyled="unstyled"
             :pt="ptm('paginator')"
-            data-pc-section="paginator"
         >
             <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
@@ -135,7 +134,6 @@
             :alwaysShow="alwaysShowPaginator"
             :unstyled="unstyled"
             :pt="ptm('paginator')"
-            data-pc-section="paginator"
         >
             <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.vue b/components/lib/tristatecheckbox/TriStateCheckbox.vue
index 96e8ee982..5d7383863 100755
--- a/components/lib/tristatecheckbox/TriStateCheckbox.vue
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="getPTOptions('root')" data-pc-name="tristatecheckbox" :data-p-highlight="active" :data-p-disabled="disabled">
+    <div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-highlight="active" :data-p-disabled="disabled">
         <input
             :id="inputId"
             type="checkbox"
diff --git a/components/lib/virtualscroller/VirtualScroller.vue b/components/lib/virtualscroller/VirtualScroller.vue
index 9c1110e73..cfc8356f9 100644
--- a/components/lib/virtualscroller/VirtualScroller.vue
+++ b/components/lib/virtualscroller/VirtualScroller.vue
@@ -1,6 +1,6 @@
 <template>
     <template v-if="!disabled">
-        <div :ref="elementRef" :class="containerClass" :tabindex="tabindex" :style="style" @scroll="onScroll" v-bind="ptm('root')" data-pc-name="virtualscroller">
+        <div :ref="elementRef" :class="containerClass" :tabindex="tabindex" :style="style" @scroll="onScroll" v-bind="ptm('root')">
             <slot
                 name="content"
                 :styleClass="contentClass"