From e1367fd494d072bdec5834e883da682d1cbfd01c Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 6 May 2024 18:23:01 +0300
Subject: [PATCH] Refactor #5681

---
 components/lib/autocomplete/AutoComplete.d.ts |  4 +-
 components/lib/autocomplete/AutoComplete.vue  |  4 +-
 .../autocomplete/style/AutoCompleteStyle.js   |  2 +-
 components/lib/button/Button.d.ts             |  4 +-
 components/lib/button/Button.vue              |  2 +-
 components/lib/carousel/Carousel.d.ts         |  4 +-
 components/lib/carousel/Carousel.vue          | 12 ++--
 .../lib/carousel/style/CarouselStyle.js       |  4 +-
 components/lib/column/Column.d.ts             | 28 ++++----
 .../lib/confirmdialog/ConfirmDialog.d.ts      |  4 +-
 .../lib/confirmdialog/ConfirmDialog.vue       | 10 +--
 .../confirmdialog/style/ConfirmDialogStyle.js |  4 +-
 components/lib/confirmpopup/ConfirmPopup.d.ts |  4 +-
 components/lib/confirmpopup/ConfirmPopup.vue  | 12 ++--
 .../confirmpopup/style/ConfirmPopupStyle.js   |  4 +-
 components/lib/datatable/BodyCell.vue         | 18 ++---
 components/lib/datatable/ColumnFilter.vue     | 43 ++++++-----
 components/lib/datatable/DataTable.vue        |  8 +--
 components/lib/datatable/HeaderCheckbox.vue   |  4 +-
 components/lib/datatable/RowCheckbox.vue      |  4 +-
 components/lib/datatable/RowRadioButton.vue   |  2 +-
 .../lib/datatable/style/DataTableStyle.js     | 24 +++----
 components/lib/dataview/DataView.d.ts         |  2 +-
 components/lib/dataview/DataView.vue          |  8 +--
 .../lib/dataview/style/DataViewStyle.js       |  2 +-
 components/lib/datepicker/DatePicker.d.ts     | 20 ++++--
 components/lib/datepicker/DatePicker.vue      | 72 +++++++++----------
 .../lib/datepicker/style/DatePickerStyle.js   | 14 ++--
 components/lib/dialog/Dialog.d.ts             |  4 +-
 components/lib/dialog/Dialog.vue              | 14 ++--
 components/lib/dialog/style/DialogStyle.js    |  4 +-
 components/lib/drawer/Drawer.d.ts             |  4 +-
 components/lib/drawer/Drawer.vue              |  8 +--
 components/lib/drawer/style/DrawerStyle.js    |  2 +-
 components/lib/fileupload/FileContent.vue     |  6 +-
 components/lib/fileupload/FileUpload.d.ts     | 33 +++++----
 components/lib/fileupload/FileUpload.vue      | 28 ++++----
 .../lib/fileupload/style/FileUploadStyle.js   | 10 +--
 components/lib/inputchips/InputChips.d.ts     |  2 +-
 components/lib/inputchips/InputChips.vue      |  4 +-
 .../lib/inputchips/style/InputChipsStyle.js   |  2 +-
 components/lib/inputnumber/InputNumber.d.ts   |  2 +-
 components/lib/inputnumber/InputNumber.vue    |  4 +-
 .../lib/inputnumber/style/InputNumberStyle.js |  2 +-
 components/lib/inputotp/InputOtp.d.ts         |  2 +-
 components/lib/inputotp/InputOtp.vue          |  4 +-
 .../lib/inputotp/style/InputOtpStyle.js       |  2 +-
 components/lib/listbox/Listbox.d.ts           |  2 +-
 components/lib/listbox/Listbox.vue            |  4 +-
 components/lib/listbox/style/ListboxStyle.js  |  2 +-
 components/lib/multiselect/MultiSelect.d.ts   |  8 +--
 components/lib/multiselect/MultiSelect.vue    | 14 ++--
 .../lib/multiselect/style/MultiSelectStyle.js |  4 +-
 components/lib/orderlist/OrderList.d.ts       | 10 +--
 components/lib/orderlist/OrderList.vue        | 18 ++---
 .../lib/paginator/JumpToPageDropdown.vue      |  4 +-
 components/lib/paginator/JumpToPageInput.vue  |  2 +-
 components/lib/paginator/Paginator.d.ts       |  6 +-
 .../lib/paginator/RowsPerPageDropdown.vue     |  4 +-
 .../lib/paginator/style/PaginatorStyle.js     |  6 +-
 components/lib/panel/Panel.d.ts               |  2 +-
 components/lib/panel/Panel.vue                |  6 +-
 components/lib/panel/style/PanelStyle.js      |  2 +-
 components/lib/password/Password.d.ts         |  2 +-
 components/lib/password/Password.vue          |  4 +-
 .../lib/password/style/PasswordStyle.js       |  2 +-
 components/lib/picklist/PickList.d.ts         | 21 +++---
 components/lib/picklist/PickList.vue          | 37 +++++-----
 components/lib/select/Select.d.ts             |  4 +-
 components/lib/select/Select.vue              |  4 +-
 components/lib/select/style/SelectStyle.js    |  2 +-
 components/lib/selectbutton/SelectButton.d.ts |  4 ++
 components/lib/selectbutton/SelectButton.vue  |  4 +-
 components/lib/speeddial/SpeedDial.d.ts       |  2 +-
 components/lib/speeddial/SpeedDial.vue        | 14 ++--
 .../lib/speeddial/style/SpeedDialStyle.js     |  2 +-
 components/lib/splitbutton/SplitButton.d.ts   |  9 +--
 components/lib/splitbutton/SplitButton.vue    | 14 ++--
 .../lib/splitbutton/style/SplitButtonStyle.js |  4 +-
 components/lib/tree/Tree.d.ts                 |  2 +-
 components/lib/tree/Tree.vue                  |  2 +-
 components/lib/tree/style/TreeStyle.js        |  2 +-
 components/lib/treeselect/TreeSelect.d.ts     |  4 +-
 components/lib/treeselect/TreeSelect.vue      |  4 +-
 .../lib/treeselect/style/TreeSelectStyle.js   |  2 +-
 components/lib/treetable/BodyCell.vue         |  4 +-
 components/lib/treetable/TreeTable.d.ts       |  2 +-
 components/lib/treetable/TreeTable.vue        |  8 +--
 .../lib/treetable/style/TreeTableStyle.js     |  2 +-
 89 files changed, 376 insertions(+), 339 deletions(-)

diff --git a/components/lib/autocomplete/AutoComplete.d.ts b/components/lib/autocomplete/AutoComplete.d.ts
index 4d6d4cbf5..c304d21f5 100755
--- a/components/lib/autocomplete/AutoComplete.d.ts
+++ b/components/lib/autocomplete/AutoComplete.d.ts
@@ -147,7 +147,7 @@ export interface AutoCompletePassThroughOptions {
      * Used to pass attributes to the InputText component.
      * @see {@link InputTextPassThroughOptions}
      */
-    input?: InputTextPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions> | AutoCompletePassThroughOptionType;
+    pcInput?: InputTextPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions> | AutoCompletePassThroughOptionType;
     /**
      * Used to pass attributes to the input multiple's DOM element.
      */
@@ -160,7 +160,7 @@ export interface AutoCompletePassThroughOptions {
      * Used to pass attributes to the Chip.
      * @see {@link ChipPassThroughOptions}
      */
-    chipLabel?: ChipPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>;
+    pcChipLabel?: ChipPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the chip icon's DOM element.
      */
diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue
index c740c3218..8dcde72d0 100755
--- a/components/lib/autocomplete/AutoComplete.vue
+++ b/components/lib/autocomplete/AutoComplete.vue
@@ -55,9 +55,9 @@
                 :aria-posinset="i + 1"
                 v-bind="ptm('token')"
             >
-                <slot name="chip" :value="option" :index="i" :removeCallback="(event) => removeOption(event, i)">
+                <slot name="chip" :class="cx('pcChipLabel')" :value="option" :index="i" :removeCallback="(event) => removeOption(event, i)">
                     <!-- TODO: removetokenicon and removeTokenIcon  deprecated since v4.0. Use chipicon slot and chipIcon prop-->
-                    <Chip :class="cx('chipLabel')" :label="getOptionLabel(option)" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeOption($event, i)" :pt="ptm('chipLabel')">
+                    <Chip :class="cx('pcChipLabel')" :label="getOptionLabel(option)" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeOption($event, i)" :pt="ptm('pcChipLabel')">
                         <template #removeicon>
                             <slot :name="$slots.chipicon ? 'chipicon' : 'removetokenicon'" :class="cx('chipIcon')" :index="i" :removeCallback="(event) => removeOption(event, i)" />
                         </template>
diff --git a/components/lib/autocomplete/style/AutoCompleteStyle.js b/components/lib/autocomplete/style/AutoCompleteStyle.js
index 35961e804..9b270b324 100644
--- a/components/lib/autocomplete/style/AutoCompleteStyle.js
+++ b/components/lib/autocomplete/style/AutoCompleteStyle.js
@@ -245,7 +245,7 @@ const classes = {
             'p-focus': instance.focusedMultipleOptionIndex === i
         }
     ],
-    chipLabel: 'p-autocomplete-chip-label',
+    pcChipLabel: 'p-autocomplete-chip-label',
     chipIcon: 'p-autocomplete-chip-icon',
     inputChip: 'p-autocomplete-input-chip',
     loader: 'p-autocomplete-loader',
diff --git a/components/lib/button/Button.d.ts b/components/lib/button/Button.d.ts
index 705bd1ec0..437610ead 100755
--- a/components/lib/button/Button.d.ts
+++ b/components/lib/button/Button.d.ts
@@ -62,9 +62,9 @@ export interface ButtonPassThroughOptions<T = any> {
      */
     label?: ButtonPassThroughOptionType<T>;
     /**
-     * Used to pass attributes to the badge's DOM element.
+     * Used to pass attributes to the Badge component.
      */
-    badge?: ButtonPassThroughOptionType<T>;
+    pcBadge?: ButtonPassThroughOptionType<T>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
diff --git a/components/lib/button/Button.vue b/components/lib/button/Button.vue
index d2c6e2464..53d9682ba 100755
--- a/components/lib/button/Button.vue
+++ b/components/lib/button/Button.vue
@@ -9,7 +9,7 @@
                 <span v-if="icon" :class="[cx('icon'), icon, iconClass]" v-bind="ptm('icon')"></span>
             </slot>
             <span v-if="label" :class="cx('label')" v-bind="ptm('label')">{{ label }}</span>
-            <Badge v-if="badge" :value="badge" :class="badgeClass" :severity="badgeSeverity" :unstyled="unstyled" v-bind="ptm('badge')"></Badge>
+            <Badge v-if="badge" :value="badge" :class="badgeClass" :severity="badgeSeverity" :unstyled="unstyled" v-bind="ptm('pcBadge')"></Badge>
         </slot>
     </button>
 </template>
diff --git a/components/lib/carousel/Carousel.d.ts b/components/lib/carousel/Carousel.d.ts
index 6cd50cc25..663eb2da4 100755
--- a/components/lib/carousel/Carousel.d.ts
+++ b/components/lib/carousel/Carousel.d.ts
@@ -88,7 +88,7 @@ export interface CarouselPassThroughOptions {
      * Used to pass attributes to the previous button's DOM element.
      * @see {@link ButtonPassThroughOptions}
      */
-    previousButton?: ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>;
+    pcPreviousButton?: ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the viewport's DOM element.
      */
@@ -109,7 +109,7 @@ export interface CarouselPassThroughOptions {
      * Used to pass attributes to the next button's DOM element.
      * @see {@link ButtonPassThroughOptions}
      */
-    nextButton?: ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>;
+    pcNextButton?: ButtonPassThroughOptions<CarouselSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the indicator list's DOM element.
      */
diff --git a/components/lib/carousel/Carousel.vue b/components/lib/carousel/Carousel.vue
index 6714459dc..6d59821a1 100755
--- a/components/lib/carousel/Carousel.vue
+++ b/components/lib/carousel/Carousel.vue
@@ -7,18 +7,18 @@
             <div :class="[cx('content'), contentClass]" :aria-live="allowAutoplay ? 'polite' : 'off'" v-bind="ptm('content')">
                 <Button
                     v-if="showNavigators"
-                    :class="cx('previousButton')"
+                    :class="cx('pcPreviousButton')"
                     :disabled="backwardIsDisabled"
                     :aria-label="ariaPrevButtonLabel"
                     :unstyled="unstyled"
                     @click="navBackward"
                     v-bind="prevButtonProps"
-                    :pt="ptm('previousButton')"
+                    :pt="ptm('pcPreviousButton')"
                     data-pc-group-section="navigator"
                 >
                     <template #icon="slotProps">
                         <slot name="previousicon">
-                            <component :is="isVertical() ? 'ChevronUpIcon' : 'ChevronLeftIcon'" :class="[cx('previousButtonIcon'), slotProps.icon]" v-bind="ptm('previousButton')['icon']" />
+                            <component :is="isVertical() ? 'ChevronUpIcon' : 'ChevronLeftIcon'" :class="[cx('previousButtonIcon'), slotProps.icon]" v-bind="ptm('pcPreviousButton')['icon']" />
                         </slot>
                     </template>
                 </Button>
@@ -61,18 +61,18 @@
                 </div>
                 <Button
                     v-if="showNavigators"
-                    :class="cx('nextButton')"
+                    :class="cx('pcNextButton')"
                     :disabled="forwardIsDisabled"
                     :aria-label="ariaNextButtonLabel"
                     :unstyled="unstyled"
                     @click="navForward"
                     v-bind="nextButtonProps"
-                    :pt="ptm('nextButton')"
+                    :pt="ptm('pcNextButton')"
                     data-pc-group-section="navigator"
                 >
                     <template #icon="slotProps">
                         <slot name="nexticon">
-                            <component :is="isVertical() ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="[cx('nextButtonIcon'), slotProps.class]" v-bind="ptm('nextButton')['icon']" />
+                            <component :is="isVertical() ? 'ChevronDownIcon' : 'ChevronRightIcon'" :class="[cx('nextButtonIcon'), slotProps.class]" v-bind="ptm('pcNextButton')['icon']" />
                         </slot>
                     </template>
                 </Button>
diff --git a/components/lib/carousel/style/CarouselStyle.js b/components/lib/carousel/style/CarouselStyle.js
index b033d8a50..43da2f595 100644
--- a/components/lib/carousel/style/CarouselStyle.js
+++ b/components/lib/carousel/style/CarouselStyle.js
@@ -102,7 +102,7 @@ const classes = {
     header: 'p-carousel-header',
     contentContainer: 'p-carousel-content-container',
     content: 'p-carousel-content',
-    previousButton: ({ instance }) => [
+    pcPreviousButton: ({ instance }) => [
         'p-carousel-prev-button',
         {
             'p-disabled': instance.backwardIsDisabled
@@ -126,7 +126,7 @@ const classes = {
             'p-carousel-item-end': instance.lastIndex() === index
         }
     ],
-    nextButton: ({ instance }) => [
+    pcNextButton: ({ instance }) => [
         'p-carousel-next-button',
         {
             'p-disabled': instance.forwardIsDisabled
diff --git a/components/lib/column/Column.d.ts b/components/lib/column/Column.d.ts
index ba61bde26..17ceec71b 100755
--- a/components/lib/column/Column.d.ts
+++ b/components/lib/column/Column.d.ts
@@ -161,7 +161,7 @@ export interface ColumnPassThroughOptions {
     /**
      * Used to pass attributes to the header checkbox's DOM element.
      */
-    headerCheckbox?: CheckboxPassThroughOptionType;
+    pcHeaderCheckbox?: CheckboxPassThroughOptionType;
     /**
      * Used to pass attributes to the column filter's DOM element.
      */
@@ -173,7 +173,7 @@ export interface ColumnPassThroughOptions {
     /**
      * Used to pass attributes to the column filter button's DOM element.
      */
-    columnFilterButton?: ColumnPassThroughOptionType;
+    pcColumnFilterButton?: ColumnPassThroughOptionType;
     /**
      * Used to pass attributes to the filter menu icon's DOM element.
      */
@@ -181,7 +181,7 @@ export interface ColumnPassThroughOptions {
     /**
      * Used to pass attributes to the column filter clear button's DOM element.
      */
-    columnFilterClearButton?: ColumnPassThroughOptionType;
+    pcColumnFilterClearButton?: ColumnPassThroughOptionType;
     /**
      * Used to pass attributes to the filter clear icon's DOM element.
      */
@@ -210,7 +210,7 @@ export interface ColumnPassThroughOptions {
      * Used to pass attributes to the Select component.
      * @see {@link SelectPassThroughOptionType}
      */
-    filterOperatorDropdown?: SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>;
+    pcFilterOperatorDropdown?: SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the filter rule list' DOM element.
      */
@@ -223,7 +223,7 @@ export interface ColumnPassThroughOptions {
      * Used to pass attributes to the Select component.
      * @see {@link SelectPassThroughOptionType}
      */
-    filterConstraintDropdown?: SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>;
+    pcFilterConstraintDropdown?: SelectPassThroughOptionType<ColumnSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the filter remove button container's DOM element.
      */
@@ -232,7 +232,7 @@ export interface ColumnPassThroughOptions {
      * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    filterRemoveRuleButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
+    pcFilterRemoveRuleButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the filter add button container's DOM element.
      */
@@ -241,7 +241,7 @@ export interface ColumnPassThroughOptions {
      * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    filterAddButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
+    pcFilterAddButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the filter buttonbar's DOM element.
      */
@@ -250,12 +250,12 @@ export interface ColumnPassThroughOptions {
      * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    filterClearButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
+    pcFilterClearButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    filterApplyButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
+    pcFilterApplyButton?: ButtonPassThroughOptions<ColumnSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the row toggler button's DOM element.
      */
@@ -275,23 +275,23 @@ export interface ColumnPassThroughOptions {
     /**
      * Used to pass attributes to the radiobutton's DOM element.
      */
-    rowRadioButton?: RadioButtonPassThroughOptionType;
+    pcRowRadiobutton?: RadioButtonPassThroughOptionType;
     /**
      * Used to pass attributes to the checkbox's DOM element.
      */
-    rowCheckbox?: CheckboxPassThroughOptionType;
+    pcRowCheckbox?: CheckboxPassThroughOptionType;
     /**
      * Used to pass attributes to the row editor init button's DOM element.
      */
-    rowEditorInit?: ColumnPassThroughOptionType;
+    pcRowEditorInit?: ColumnPassThroughOptionType;
     /**
      * Used to pass attributes to the row editor save button's DOM element.
      */
-    rowEditorSave?: ColumnPassThroughOptionType;
+    pcRowEditorSave?: ColumnPassThroughOptionType;
     /**
      * Used to pass attributes to the row editor cancel button's DOM element.
      */
-    rowEditorCancel?: ColumnPassThroughOptionType;
+    pcRowEditorCancel?: ColumnPassThroughOptionType;
     /**
      * Used to pass attributes to the footer cell's DOM element.
      */
diff --git a/components/lib/confirmdialog/ConfirmDialog.d.ts b/components/lib/confirmdialog/ConfirmDialog.d.ts
index d4f2f71f2..e472bd382 100644
--- a/components/lib/confirmdialog/ConfirmDialog.d.ts
+++ b/components/lib/confirmdialog/ConfirmDialog.d.ts
@@ -109,12 +109,12 @@ export interface ConfirmDialogPassThroughOptions {
      * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    rejectButton?: ButtonPassThroughOptions<ConfirmDialogSharedPassThroughMethodOptions>;
+    pcRejectButton?: ButtonPassThroughOptions<ConfirmDialogSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    acceptButton?: ButtonPassThroughOptions<ConfirmDialogSharedPassThroughMethodOptions>;
+    pcAcceptButton?: ButtonPassThroughOptions<ConfirmDialogSharedPassThroughMethodOptions>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
diff --git a/components/lib/confirmdialog/ConfirmDialog.vue b/components/lib/confirmdialog/ConfirmDialog.vue
index 0a0cab911..8b7eb8009 100644
--- a/components/lib/confirmdialog/ConfirmDialog.vue
+++ b/components/lib/confirmdialog/ConfirmDialog.vue
@@ -29,25 +29,25 @@
         </template>
         <template v-if="!$slots.container" #footer>
             <Button
-                :class="[cx('rejectButton'), confirmation.rejectClass]"
+                :class="[cx('pcRejectButton'), confirmation.rejectClass]"
                 :autofocus="autoFocusReject"
                 :unstyled="unstyled"
                 :text="confirmation.rejectProps?.text || false"
                 @click="reject()"
                 v-bind="confirmation.rejectProps"
                 :label="rejectLabel"
-                :pt="ptm('rejectButton')"
+                :pt="ptm('pcRejectButton')"
             >
                 <template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
                     <slot name="rejecticon">
-                        <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-section="rejectbuttonicon" />
+                        <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('pcRejectButton')['icon']" data-pc-section="rejectbuttonicon" />
                     </slot>
                 </template>
             </Button>
-            <Button :label="acceptLabel" :class="[cx('acceptButton'), confirmation.acceptClass]" :autofocus="autoFocusAccept" :unstyled="unstyled" @click="accept()" v-bind="confirmation.acceptProps" :pt="ptm('acceptButton')">
+            <Button :label="acceptLabel" :class="[cx('pcAcceptButton'), confirmation.acceptClass]" :autofocus="autoFocusAccept" :unstyled="unstyled" @click="accept()" v-bind="confirmation.acceptProps" :pt="ptm('pcAcceptButton')">
                 <template v-if="acceptIcon || $slots.accepticon" #icon="iconProps">
                     <slot name="accepticon">
-                        <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" data-pc-section="acceptbuttonicon" />
+                        <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('pcAcceptButton')['icon']" data-pc-section="acceptbuttonicon" />
                     </slot>
                 </template>
             </Button>
diff --git a/components/lib/confirmdialog/style/ConfirmDialogStyle.js b/components/lib/confirmdialog/style/ConfirmDialogStyle.js
index fef2454fb..b7626df11 100644
--- a/components/lib/confirmdialog/style/ConfirmDialogStyle.js
+++ b/components/lib/confirmdialog/style/ConfirmDialogStyle.js
@@ -16,8 +16,8 @@ const classes = {
     root: 'p-confirmdialog',
     icon: 'p-confirmdialog-icon',
     message: 'p-confirmdialog-message',
-    rejectButton: 'p-confirmdialog-reject-button',
-    acceptButton: 'p-confirmdialog-accept-button'
+    pcRejectButton: 'p-confirmdialog-reject-button',
+    pcAcceptButton: 'p-confirmdialog-accept-button'
 };
 
 export default BaseStyle.extend({
diff --git a/components/lib/confirmpopup/ConfirmPopup.d.ts b/components/lib/confirmpopup/ConfirmPopup.d.ts
index 64434d066..81bfebb44 100644
--- a/components/lib/confirmpopup/ConfirmPopup.d.ts
+++ b/components/lib/confirmpopup/ConfirmPopup.d.ts
@@ -91,12 +91,12 @@ export interface ConfirmPopupPassThroughOptions {
      * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    rejectButton?: ButtonPassThroughOptions<ConfirmPopupSharedPassThroughMethodOptions>;
+    pcRejectButton?: ButtonPassThroughOptions<ConfirmPopupSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    acceptButton?: ButtonPassThroughOptions<ConfirmPopupSharedPassThroughMethodOptions>;
+    pcAcceptButton?: ButtonPassThroughOptions<ConfirmPopupSharedPassThroughMethodOptions>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
diff --git a/components/lib/confirmpopup/ConfirmPopup.vue b/components/lib/confirmpopup/ConfirmPopup.vue
index c246d3d13..2c4402f85 100644
--- a/components/lib/confirmpopup/ConfirmPopup.vue
+++ b/components/lib/confirmpopup/ConfirmPopup.vue
@@ -16,7 +16,7 @@
                     <component v-else :is="$slots.message" :message="confirmation"></component>
                     <div :class="cx('footer')" v-bind="ptm('footer')">
                         <Button
-                            :class="[cx('rejectButton'), confirmation.rejectClass]"
+                            :class="[cx('pcRejectButton'), confirmation.rejectClass]"
                             :autofocus="autoFocusReject"
                             :unstyled="unstyled"
                             :size="confirmation.rejectProps?.size || 'small'"
@@ -25,16 +25,16 @@
                             @keydown="onRejectKeydown"
                             v-bind="confirmation.rejectProps"
                             :label="rejectLabel"
-                            :pt="ptm('rejectButton')"
+                            :pt="ptm('pcRejectButton')"
                         >
                             <template v-if="rejectIcon || $slots.rejecticon" #icon="iconProps">
                                 <slot name="rejecticon">
-                                    <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('rejectButton')['icon']" data-pc-section="rejectbuttonicon" />
+                                    <span :class="[rejectIcon, iconProps.class]" v-bind="ptm('pcRejectButton')['icon']" data-pc-section="rejectbuttonicon" />
                                 </slot>
                             </template>
                         </Button>
                         <Button
-                            :class="[cx('acceptButton'), confirmation.acceptClass]"
+                            :class="[cx('pcAcceptButton'), confirmation.acceptClass]"
                             :autofocus="autoFocusAccept"
                             :unstyled="unstyled"
                             :size="confirmation.acceptProps?.size || 'small'"
@@ -42,11 +42,11 @@
                             @keydown="onAcceptKeydown"
                             v-bind="confirmation.acceptProps"
                             :label="acceptLabel"
-                            :pt="ptm('acceptButton')"
+                            :pt="ptm('pcAcceptButton')"
                         >
                             <template v-if="acceptIcon || $slots.accepticon" #icon="iconProps">
                                 <slot name="accepticon">
-                                    <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('acceptButton')['icon']" data-pc-section="acceptbuttonicon" />
+                                    <span :class="[acceptIcon, iconProps.class]" v-bind="ptm('pcAcceptButton')['icon']" data-pc-section="acceptbuttonicon" />
                                 </slot>
                             </template>
                         </Button>
diff --git a/components/lib/confirmpopup/style/ConfirmPopupStyle.js b/components/lib/confirmpopup/style/ConfirmPopupStyle.js
index abc5cdb4f..1a8f48ef7 100644
--- a/components/lib/confirmpopup/style/ConfirmPopupStyle.js
+++ b/components/lib/confirmpopup/style/ConfirmPopupStyle.js
@@ -121,8 +121,8 @@ const classes = {
     icon: 'p-confirmpopup-icon',
     message: 'p-confirmpopup-message',
     footer: 'p-confirmpopup-footer',
-    rejectButton: 'p-confirmpopup-reject-button',
-    acceptButton: 'p-confirmpopup-accept-button'
+    pcRejectButton: 'p-confirmpopup-reject-button',
+    pcAcceptButton: 'p-confirmpopup-accept-button'
 };
 
 export default BaseStyle.extend({
diff --git a/components/lib/datatable/BodyCell.vue b/components/lib/datatable/BodyCell.vue
index befe3c8ff..46d1f7366 100755
--- a/components/lib/datatable/BodyCell.vue
+++ b/components/lib/datatable/BodyCell.vue
@@ -85,41 +85,41 @@
         <template v-else-if="editMode === 'row' && columnProp('rowEditor')">
             <Button
                 v-if="!d_editing"
-                :class="cx('rowEditorInit')"
+                :class="cx('pcRowEditorInit')"
                 :aria-label="initButtonAriaLabel"
                 :unstyled="unstyled"
                 @click="onRowEditInit"
-                v-bind="{ ...getColumnPT('rowEditorInit'), ...editButtonProps.init }"
+                v-bind="{ ...getColumnPT('pcRowEditorInit'), ...editButtonProps.init }"
                 data-pc-group-section="rowactionbutton"
             >
                 <template #icon="slotProps">
-                    <component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="slotProps.class" v-bind="getColumnPT('rowEditorInit')['icon']" />
+                    <component :is="(column.children && column.children.roweditoriniticon) || 'PencilIcon'" :class="slotProps.class" v-bind="getColumnPT('pcRowEditorInit')['icon']" />
                 </template>
             </Button>
             <Button
                 v-if="d_editing"
-                :class="cx('rowEditorSave')"
+                :class="cx('pcRowEditorSave')"
                 :aria-label="saveButtonAriaLabel"
                 :unstyled="unstyled"
                 @click="onRowEditSave"
-                v-bind="{ ...getColumnPT('rowEditorSave'), ...editButtonProps.save }"
+                v-bind="{ ...getColumnPT('pcRowEditorSave'), ...editButtonProps.save }"
                 data-pc-group-section="rowactionbutton"
             >
                 <template #icon="slotProps">
-                    <component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="slotProps.class" v-bind="getColumnPT('rowEditorSave')['icon']" />
+                    <component :is="(column.children && column.children.roweditorsaveicon) || 'CheckIcon'" :class="slotProps.class" v-bind="getColumnPT('pcRowEditorSave')['icon']" />
                 </template>
             </Button>
             <Button
                 v-if="d_editing"
-                :class="cx('rowEditorCancel')"
+                :class="cx('pcRowEditorCancel')"
                 :aria-label="cancelButtonAriaLabel"
                 :unstyled="unstyled"
                 @click="onRowEditCancel"
-                v-bind="{ ...getColumnPT('rowEditorCancel'), ...editButtonProps.cancel }"
+                v-bind="{ ...getColumnPT('pcRowEditorCancel'), ...editButtonProps.cancel }"
                 data-pc-group-section="rowactionbutton"
             >
                 <template #icon="slotProps">
-                    <component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="slotProps.class" v-bind="getColumnPT('rowEditorCancel')['icon']" />
+                    <component :is="(column.children && column.children.roweditorcancelicon) || 'TimesIcon'" :class="slotProps.class" v-bind="getColumnPT('pcRowEditorCancel')['icon']" />
                 </template>
             </Button>
         </template>
diff --git a/components/lib/datatable/ColumnFilter.vue b/components/lib/datatable/ColumnFilter.vue
index 5a1ce5cb6..363039029 100644
--- a/components/lib/datatable/ColumnFilter.vue
+++ b/components/lib/datatable/ColumnFilter.vue
@@ -10,11 +10,11 @@
             aria-haspopup="true"
             :aria-expanded="overlayVisible"
             :aria-controls="overlayId"
-            :class="cx('columnFilterButton')"
+            :class="cx('pcColumnFilterButton')"
             :unstyled="unstyled"
             @click="toggleMenu($event)"
             @keydown="onToggleButtonKeyDown($event)"
-            v-bind="{ ...getColumnPT('columnFilterButton', ptmFilterMenuParams), ...filterButtonProps.filter }"
+            v-bind="{ ...getColumnPT('pcColumnFilterButton', ptmFilterMenuParams), ...filterButtonProps.filter }"
         >
             <template #icon="slotProps">
                 <component :is="filterIconTemplate || 'FilterIcon'" :class="slotProps.class" v-bind="getColumnPT('filterMenuIcon')" />
@@ -22,10 +22,10 @@
         </Button>
         <Button
             v-if="showClearButton && display === 'row' && hasRowFilter()"
-            :class="cx('columnFilterClearButton')"
+            :class="cx('pcColumnFilterClearButton')"
             :unstyled="unstyled"
             @click="clearFilter()"
-            v-bind="{ ...getColumnPT('columnFilterClearButton', ptmHeaderFilterClearParams), ...filterButtonProps.inline.clear }"
+            v-bind="{ ...getColumnPT('pcColumnFilterClearButton', ptmHeaderFilterClearParams), ...filterButtonProps.inline.clear }"
         >
             <template #icon="slotProps">
                 <component :is="filterClearIconTemplate || 'FilterSlashIcon'" :class="slotProps.class" v-bind="getColumnPT('filterClearIcon')" />
@@ -73,12 +73,12 @@
                                 :options="operatorOptions"
                                 :modelValue="operator"
                                 :aria-label="filterOperatorAriaLabel"
-                                :class="cx('filterOperatorDropdown')"
+                                :class="cx('pcFilterOperatorDropdown')"
                                 optionLabel="label"
                                 optionValue="value"
                                 @update:modelValue="onOperatorChange($event)"
                                 :unstyled="unstyled"
-                                :pt="getColumnPT('filterOperatorDropdown')"
+                                :pt="getColumnPT('pcFilterOperatorDropdown')"
                             ></Select>
                         </div>
                         <div :class="cx('filterRuleList')" v-bind="getColumnPT('filterRuleList')">
@@ -87,37 +87,46 @@
                                     v-if="isShowMatchModes"
                                     :options="matchModes"
                                     :modelValue="fieldConstraint.matchMode"
-                                    :class="cx('filterConstraintDropdown')"
+                                    :class="cx('pcFilterConstraintDropdown')"
                                     optionLabel="label"
                                     optionValue="value"
                                     :aria-label="filterRuleAriaLabel"
                                     @update:modelValue="onMenuMatchModeChange($event, i)"
                                     :unstyled="unstyled"
-                                    :pt="getColumnPT('filterConstraintDropdown')"
+                                    :pt="getColumnPT('pcFilterConstraintDropdown')"
                                 ></Select>
                                 <component v-if="display === 'menu'" :is="filterElement" :field="field" :filterModel="fieldConstraint" :filterCallback="filterCallback" :applyFilter="applyFilter" />
                                 <div v-bind="getColumnPT('filterRemove')">
                                     <Button
                                         v-if="showRemoveIcon"
                                         type="button"
-                                        :class="cx('filterRemoveRuleButton')"
+                                        :class="cx('pcFilterRemoveRuleButton')"
                                         @click="removeConstraint(i)"
                                         :label="removeRuleButtonLabel"
                                         :unstyled="unstyled"
                                         v-bind="filterButtonProps.popover.removeRule"
-                                        :pt="getColumnPT('filterRemoveRuleButton')"
+                                        :pt="getColumnPT('pcFilterRemoveRuleButton')"
                                     >
                                         <template #icon="iconProps">
-                                            <component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="getColumnPT('filterRemoveRuleButton')['icon']" />
+                                            <component :is="filterRemoveIconTemplate || 'TrashIcon'" :class="iconProps.class" v-bind="getColumnPT('pcFilterRemoveRuleButton')['icon']" />
                                         </template>
                                     </Button>
                                 </div>
                             </div>
                         </div>
                         <div v-if="isShowAddConstraint" v-bind="getColumnPT('filterAddButtonContainer')">
-                            <Button type="button" :label="addRuleButtonLabel" iconPos="left" :class="cx('filterAddButton')" @click="addConstraint()" :unstyled="unstyled" v-bind="filterButtonProps.popover.addRule" :pt="getColumnPT('filterAddButton')">
+                            <Button
+                                type="button"
+                                :label="addRuleButtonLabel"
+                                iconPos="left"
+                                :class="cx('pcFilterAddButton')"
+                                @click="addConstraint()"
+                                :unstyled="unstyled"
+                                v-bind="filterButtonProps.popover.addRule"
+                                :pt="getColumnPT('pcFilterAddButton')"
+                            >
                                 <template #icon="iconProps">
-                                    <component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPT('filterAddButton')['icon']" />
+                                    <component :is="filterAddIconTemplate || 'PlusIcon'" :class="iconProps.class" v-bind="getColumnPT('pcFilterAddButton')['icon']" />
                                 </template>
                             </Button>
                         </div>
@@ -125,24 +134,24 @@
                             <Button
                                 v-if="!filterClearTemplate && showClearButton"
                                 type="button"
-                                :class="cx('filterClearButton')"
+                                :class="cx('pcFilterClearButton')"
                                 :label="clearButtonLabel"
                                 @click="clearFilter"
                                 :unstyled="unstyled"
                                 v-bind="filterButtonProps.popover.clear"
-                                :pt="getColumnPT('filterClearButton')"
+                                :pt="getColumnPT('pcFilterClearButton')"
                             ></Button>
                             <component v-else :is="filterClearTemplate" :field="field" :filterModel="filters[field]" :filterCallback="clearFilter" />
                             <template v-if="showApplyButton">
                                 <Button
                                     v-if="!filterApplyTemplate"
                                     type="button"
-                                    :class="cx('filterApplyButton')"
+                                    :class="cx('pcFilterApplyButton')"
                                     :label="applyButtonLabel"
                                     @click="applyFilter()"
                                     :unstyled="unstyled"
                                     v-bind="filterButtonProps.popover.apply"
-                                    :pt="getColumnPT('filterApplyButton')"
+                                    :pt="getColumnPT('pcFilterApplyButton')"
                                 ></Button>
                                 <component v-else :is="filterApplyTemplate" :field="field" :filterModel="filters[field]" :filterCallback="applyFilter" />
                             </template>
diff --git a/components/lib/datatable/DataTable.vue b/components/lib/datatable/DataTable.vue
index 2f660032a..688f6238d 100755
--- a/components/lib/datatable/DataTable.vue
+++ b/components/lib/datatable/DataTable.vue
@@ -21,11 +21,11 @@
             :template="paginatorTemplate"
             :rowsPerPageOptions="rowsPerPageOptions"
             :currentPageReportTemplate="currentPageReportTemplate"
-            :class="cx('paginator', { position: 'top' })"
+            :class="cx('pcPaginator', { position: 'top' })"
             @page="onPage($event)"
             :alwaysShow="alwaysShowPaginator"
             :unstyled="unstyled"
-            :pt="ptm('paginator')"
+            :pt="ptm('pcPaginator')"
         >
             <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
@@ -240,11 +240,11 @@
             :template="paginatorTemplate"
             :rowsPerPageOptions="rowsPerPageOptions"
             :currentPageReportTemplate="currentPageReportTemplate"
-            :class="cx('paginator', { position: 'bottom' })"
+            :class="cx('pcPaginator', { position: 'bottom' })"
             @page="onPage($event)"
             :alwaysShow="alwaysShowPaginator"
             :unstyled="unstyled"
-            :pt="ptm('paginator')"
+            :pt="ptm('pcPaginator')"
         >
             <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
diff --git a/components/lib/datatable/HeaderCheckbox.vue b/components/lib/datatable/HeaderCheckbox.vue
index 97804d39f..240adb3fb 100755
--- a/components/lib/datatable/HeaderCheckbox.vue
+++ b/components/lib/datatable/HeaderCheckbox.vue
@@ -1,8 +1,8 @@
 <template>
-    <Checkbox :modelValue="checked" :binary="true" :disabled="disabled" :aria-label="headerCheckboxAriaLabel" @change="onChange" :pt="getColumnPT('headerCheckbox')">
+    <Checkbox :modelValue="checked" :binary="true" :disabled="disabled" :aria-label="headerCheckboxAriaLabel" @change="onChange" :pt="getColumnPT('pcHeaderCheckbox')">
         <template #icon="slotProps">
             <component v-if="headerCheckboxIconTemplate" :is="headerCheckboxIconTemplate" :checked="slotProps.checked" :class="slotProps.class" />
-            <CheckIcon v-else-if="!headerCheckboxIconTemplate && slotProps.checked" :class="slotProps.class" v-bind="getColumnPT('headerCheckbox.icon')" />
+            <CheckIcon v-else-if="!headerCheckboxIconTemplate && slotProps.checked" :class="slotProps.class" v-bind="getColumnPT('pcHeaderCheckbox.icon')" />
         </template>
     </Checkbox>
 </template>
diff --git a/components/lib/datatable/RowCheckbox.vue b/components/lib/datatable/RowCheckbox.vue
index f600064f6..0465114e6 100755
--- a/components/lib/datatable/RowCheckbox.vue
+++ b/components/lib/datatable/RowCheckbox.vue
@@ -1,8 +1,8 @@
 <template>
-    <Checkbox :modelValue="checked" :binary="true" :disabled="$attrs.disabled" :aria-label="checkboxAriaLabel" @change="onChange" :unstyled="unstyled" :pt="getColumnPT('rowCheckbox')">
+    <Checkbox :modelValue="checked" :binary="true" :disabled="$attrs.disabled" :aria-label="checkboxAriaLabel" @change="onChange" :unstyled="unstyled" :pt="getColumnPT('pcRowCheckbox')">
         <template #icon="slotProps">
             <component v-if="rowCheckboxIconTemplate" :is="rowCheckboxIconTemplate" :checked="slotProps.checked" :class="slotProps.class" />
-            <CheckIcon v-else-if="!rowCheckboxIconTemplate && slotProps.checked" :class="slotProps.class" v-bind="getColumnPT('rowCheckbox.icon')" />
+            <CheckIcon v-else-if="!rowCheckboxIconTemplate && slotProps.checked" :class="slotProps.class" v-bind="getColumnPT('pcRowCheckbox.icon')" />
         </template>
     </Checkbox>
 </template>
diff --git a/components/lib/datatable/RowRadioButton.vue b/components/lib/datatable/RowRadioButton.vue
index 7af303ce7..ae12f8438 100755
--- a/components/lib/datatable/RowRadioButton.vue
+++ b/components/lib/datatable/RowRadioButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <RadioButton :modelValue="checked" :binary="true" :disabled="$attrs.disabled" :name="name" @change="onChange" :unstyled="unstyled" :pt="getColumnPT('rowRadiobutton')" />
+    <RadioButton :modelValue="checked" :binary="true" :disabled="$attrs.disabled" :name="name" @change="onChange" :unstyled="unstyled" :pt="getColumnPT('pcRowRadiobutton')" />
 </template>
 
 <script>
diff --git a/components/lib/datatable/style/DataTableStyle.js b/components/lib/datatable/style/DataTableStyle.js
index 8320fa1ff..7abe1d3bf 100644
--- a/components/lib/datatable/style/DataTableStyle.js
+++ b/components/lib/datatable/style/DataTableStyle.js
@@ -598,7 +598,7 @@ const classes = {
     overlay: 'p-datatable-mask p-component-overlay',
     loadingIcon: 'p-datatable-loading-icon',
     header: 'p-datatable-header',
-    paginator: ({ position }) => 'p-datatable-paginator-' + position,
+    pcPaginator: ({ position }) => 'p-datatable-paginator-' + position,
     tableContainer: 'p-datatable-table-container',
     table: ({ props }) => [
         'p-datatable-table',
@@ -638,8 +638,8 @@ const classes = {
         }
     ],
     filterElementContainer: 'p-datatable-filter-element-container',
-    columnFilterButton: 'p-datatable-column-filter-button',
-    columnFilterClearButton: 'p-datatable-column-filter-clear-button',
+    pcColumnFilterButton: 'p-datatable-column-filter-button',
+    pcColumnFilterClearButton: 'p-datatable-column-filter-clear-button',
     filterOverlay: ({ instance, props }) => [
         'p-datatable-filter-overlay p-component',
         {
@@ -656,15 +656,15 @@ const classes = {
     ],
     filterConstraintSeparator: 'p-datatable-filter-constraint-separator',
     filterOperator: 'p-datatable-filter-operator',
-    filterOperatorDropdown: 'p-datatable-filter-operator-dropdown',
+    pcFilterOperatorDropdown: 'p-datatable-filter-operator-dropdown',
     filterRuleList: 'p-datatable-filter-rule-list',
     filterRule: 'p-datatable-filter-rule',
-    filterConstraintDropdown: 'p-datatable-filter-constraint-dropdown',
-    filterRemoveRuleButton: 'p-datatable-filter-remove-rule-button',
-    filterAddButton: 'p-column-filter-add-button',
+    pcFilterConstraintDropdown: 'p-datatable-filter-constraint-dropdown',
+    pcFilterRemoveRuleButton: 'p-datatable-filter-remove-rule-button',
+    pcFilterAddButton: 'p-column-filter-add-button',
     filterButtonbar: 'p-datatable-filter-buttonbar',
-    filterClearButton: 'p-datatable-filter-clear-button',
-    filterApplyButton: 'p-datatable-filter-apply-button',
+    pcFilterClearButton: 'p-datatable-filter-clear-button',
+    pcFilterApplyButton: 'p-datatable-filter-apply-button',
     tbody: ({ props }) => (props.frozenRow ? 'p-datatable-tbody p-datatable-frozen-tbody' : 'p-datatable-tbody'),
     rowGroupHeader: 'p-datatable-row-group-header',
     rowToggleButton: 'p-datatable-row-toggle-button',
@@ -701,9 +701,9 @@ const classes = {
         }
     ],
     reorderableRowHandle: 'p-datatable-reorderable-row-handle',
-    rowEditorInit: 'p-datatable-row-editor-init',
-    rowEditorSave: 'p-datatable-row-editor-save',
-    rowEditorCancel: 'p-datatable-row-editor-cancel',
+    pcRowEditorInit: 'p-datatable-row-editor-init',
+    pcRowEditorSave: 'p-datatable-row-editor-save',
+    pcRowEditorCancel: 'p-datatable-row-editor-cancel',
     tfoot: 'p-datatable-tfoot',
     footerCell: ({ instance }) => [
         {
diff --git a/components/lib/dataview/DataView.d.ts b/components/lib/dataview/DataView.d.ts
index 322d29da6..956d72ad0 100755
--- a/components/lib/dataview/DataView.d.ts
+++ b/components/lib/dataview/DataView.d.ts
@@ -99,7 +99,7 @@ export interface DataViewPassThroughOptions {
      * Used to pass attributes to the Paginator component.
      * @see {@link PaginatorPassThroughOptionType}
      */
-    paginator?: PaginatorPassThroughOptionType<DataViewSharedPassThroughMethodOptions>;
+    pcPaginator?: PaginatorPassThroughOptionType<DataViewSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the content's DOM element.
      */
diff --git a/components/lib/dataview/DataView.vue b/components/lib/dataview/DataView.vue
index 3eecb50dd..a6731d502 100755
--- a/components/lib/dataview/DataView.vue
+++ b/components/lib/dataview/DataView.vue
@@ -12,11 +12,11 @@
             :template="paginatorTemplate"
             :rowsPerPageOptions="rowsPerPageOptions"
             :currentPageReportTemplate="currentPageReportTemplate"
-            :class="cx('paginator', { position: 'top' })"
+            :class="cx('pcPaginator', { position: 'top' })"
             :alwaysShow="alwaysShowPaginator"
             @page="onPage($event)"
             :unstyled="unstyled"
-            :pt="ptm('paginator')"
+            :pt="ptm('pcPaginator')"
         >
             <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
@@ -45,11 +45,11 @@
             :template="paginatorTemplate"
             :rowsPerPageOptions="rowsPerPageOptions"
             :currentPageReportTemplate="currentPageReportTemplate"
-            :class="cx('paginator', { position: 'bottom' })"
+            :class="cx('pcPaginator', { position: 'bottom' })"
             :alwaysShow="alwaysShowPaginator"
             @page="onPage($event)"
             :unstyled="unstyled"
-            :pt="ptm('paginator')"
+            :pt="ptm('pcPaginator')"
         >
             <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
diff --git a/components/lib/dataview/style/DataViewStyle.js b/components/lib/dataview/style/DataViewStyle.js
index fc0a57538..74f8f9bf0 100644
--- a/components/lib/dataview/style/DataViewStyle.js
+++ b/components/lib/dataview/style/DataViewStyle.js
@@ -42,7 +42,7 @@ const classes = {
         }
     ],
     header: 'p-dataview-header',
-    paginator: ({ position }) => 'p-dataview-paginator-' + position,
+    pcPaginator: ({ position }) => 'p-dataview-paginator-' + position,
     content: 'p-dataview-content',
     emptyMessage: 'p-dataview-empty-message', // TODO: remove?
     footer: 'p-dataview-footer'
diff --git a/components/lib/datepicker/DatePicker.d.ts b/components/lib/datepicker/DatePicker.d.ts
index 698d7e5cc..ae2bd1799 100755
--- a/components/lib/datepicker/DatePicker.d.ts
+++ b/components/lib/datepicker/DatePicker.d.ts
@@ -138,7 +138,7 @@ export interface DatePickerPassThroughOptions {
      * Used to pass attributes to the InputText component.
      * @see {@link InputTextPassThroughOptions}
      */
-    input?: InputTextPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
+    pcInput?: InputTextPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the dropdown's DOM element.
      */
@@ -163,7 +163,7 @@ export interface DatePickerPassThroughOptions {
      * Used to pass attributes to the previous button's DOM element.
      * @see {@link ButtonPassThroughOptions}
      */
-    previousButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
+    pcPreviousButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the title's DOM element.
      */
@@ -188,7 +188,7 @@ export interface DatePickerPassThroughOptions {
      * Used to pass attributes to the next button's DOM element.
      * @see {@link ButtonPassThroughOptions}
      */
-    nextButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
+    pcNextButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the container's DOM element.
      */
@@ -313,16 +313,26 @@ export interface DatePickerPassThroughOptions {
      * Used to pass attributes to the buttonbar's DOM element.
      */
     buttonbar?: DatePickerPassThroughOptionType;
+    /**
+     * Used to pass attributes to the increment button's DOM element.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    pcIncrementButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
+    /**
+     * Used to pass attributes to the decrement button's DOM element.
+     * @see {@link ButtonPassThroughOptions}
+     */
+    pcDecrementButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the today button's DOM element.
      * @see {@link ButtonPassThroughOptions}
      */
-    todayButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
+    pcTodayButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the clear button's DOM element.
      * @see {@link ButtonPassThroughOptions}
      */
-    clearButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
+    pcClearButton?: ButtonPassThroughOptions<DatePickerSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the aria selected day's DOM element.
      */
diff --git a/components/lib/datepicker/DatePicker.vue b/components/lib/datepicker/DatePicker.vue
index a1584e1da..4ad458d46 100755
--- a/components/lib/datepicker/DatePicker.vue
+++ b/components/lib/datepicker/DatePicker.vue
@@ -5,7 +5,7 @@
             :ref="inputRef"
             :id="inputId"
             role="combobox"
-            :class="[inputClass, cx('input')]"
+            :class="[inputClass, cx('pcInput')]"
             :style="inputStyle"
             :value="inputFieldValue"
             :placeholder="placeholder"
@@ -28,7 +28,7 @@
             @focus="onFocus"
             @blur="onBlur"
             @keydown="onKeyDown"
-            :pt="ptm('input')"
+            :pt="ptm('pcInput')"
         />
         <slot v-if="showIcon && iconDisplay === 'button'" name="dropdownbutton">
             <button
@@ -78,19 +78,19 @@
                                     <Button
                                         v-show="showOtherMonths ? groupIndex === 0 : false"
                                         :ref="previousButtonRef"
-                                        :class="cx('previousButton')"
+                                        :class="cx('pcPreviousButton')"
                                         :disabled="disabled"
                                         :aria-label="currentView === 'year' ? $primevue.config.locale.prevDecade : currentView === 'month' ? $primevue.config.locale.prevYear : $primevue.config.locale.prevMonth"
                                         :unstyled="unstyled"
                                         @click="onPrevButtonClick"
                                         @keydown="onContainerButtonKeydown"
                                         v-bind="navigatorButtonProps"
-                                        :pt="ptm('previousButton')"
+                                        :pt="ptm('pcPreviousButton')"
                                         data-pc-group-section="navigator"
                                     >
                                         <template #icon="slotProps">
                                             <slot name="previousicon">
-                                                <component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="[previousIcon, slotProps.class]" v-bind="ptm('previousButton')['icon']" />
+                                                <component :is="previousIcon ? 'span' : 'ChevronLeftIcon'" :class="[previousIcon, slotProps.class]" v-bind="ptm('pcPreviousButton')['icon']" />
                                             </slot>
                                         </template>
                                     </Button>
@@ -158,19 +158,19 @@
                                     <Button
                                         v-show="showOtherMonths ? (numberOfMonths === 1 ? true : groupIndex === numberOfMonths - 1) : false"
                                         :ref="nextButtonRef"
-                                        :class="cx('nextButton')"
+                                        :class="cx('pcNextButton')"
                                         :disabled="disabled"
                                         :aria-label="currentView === 'year' ? $primevue.config.locale.nextDecade : currentView === 'month' ? $primevue.config.locale.nextYear : $primevue.config.locale.nextMonth"
                                         :unstyled="unstyled"
                                         @click="onNextButtonClick"
                                         @keydown="onContainerButtonKeydown"
                                         v-bind="navigatorButtonProps"
-                                        :pt="ptm('nextButton')"
+                                        :pt="ptm('pcNextButton')"
                                         data-pc-group-section="navigator"
                                     >
                                         <template #icon="slotProps">
                                             <slot name="nexticon">
-                                                <component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="[nextIcon, slotProps.class]" v-bind="ptm('nextButton')['icon']" />
+                                                <component :is="nextIcon ? 'span' : 'ChevronRightIcon'" :class="[nextIcon, slotProps.class]" v-bind="ptm('pcNextButton')['icon']" />
                                             </slot>
                                         </template>
                                     </Button>
@@ -311,7 +311,7 @@
                     <div v-if="(showTime || timeOnly) && currentView === 'date'" :class="cx('timePicker')" v-bind="ptm('timePicker')">
                         <div :class="cx('hourPicker')" v-bind="ptm('hourPicker')" data-pc-group-section="timepickerContainer">
                             <Button
-                                :class="cx('incrementButton')"
+                                :class="cx('pcIncrementButton')"
                                 :aria-label="$primevue.config.locale.nextHour"
                                 :unstyled="unstyled"
                                 @mousedown="onTimePickerElementMouseDown($event, 0, 1)"
@@ -323,18 +323,18 @@
                                 @keyup.enter="onTimePickerElementMouseUp($event)"
                                 @keyup.space="onTimePickerElementMouseUp($event)"
                                 v-bind="timepickerButtonProps"
-                                :pt="ptm('incrementButton')"
+                                :pt="ptm('pcIncrementButton')"
                                 data-pc-group-section="timepickerbutton"
                             >
                                 <template #icon="slotProps">
                                     <slot name="incrementicon">
-                                        <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
+                                        <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('pcIncrementButton')['icon']" data-pc-group-section="timepickerlabel" />
                                     </slot>
                                 </template>
                             </Button>
                             <span v-bind="ptm('hour')" data-pc-group-section="timepickerlabel">{{ formattedCurrentHour }}</span>
                             <Button
-                                :class="cx('decrementButton')"
+                                :class="cx('pcDecrementButton')"
                                 :aria-label="$primevue.config.locale.prevHour"
                                 :unstyled="unstyled"
                                 @mousedown="onTimePickerElementMouseDown($event, 0, -1)"
@@ -346,12 +346,12 @@
                                 @keyup.enter="onTimePickerElementMouseUp($event)"
                                 @keyup.space="onTimePickerElementMouseUp($event)"
                                 v-bind="timepickerButtonProps"
-                                :pt="ptm('decrementButton')"
+                                :pt="ptm('pcDecrementButton')"
                                 data-pc-group-section="timepickerbutton"
                             >
                                 <template #icon="slotProps">
                                     <slot name="decrementicon">
-                                        <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
+                                        <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('pcDecrementButton')['icon']" data-pc-group-section="timepickerlabel" />
                                     </slot>
                                 </template>
                             </Button>
@@ -361,7 +361,7 @@
                         </div>
                         <div :class="cx('minutePicker')" v-bind="ptm('minutePicker')" data-pc-group-section="timepickerContainer">
                             <Button
-                                :class="cx('incrementButton')"
+                                :class="cx('pcIncrementButton')"
                                 :aria-label="$primevue.config.locale.nextMinute"
                                 :disabled="disabled"
                                 :unstyled="unstyled"
@@ -374,18 +374,18 @@
                                 @keyup.enter="onTimePickerElementMouseUp($event)"
                                 @keyup.space="onTimePickerElementMouseUp($event)"
                                 v-bind="timepickerButtonProps"
-                                :pt="ptm('incrementButton')"
+                                :pt="ptm('pcIncrementButton')"
                                 data-pc-group-section="timepickerbutton"
                             >
                                 <template #icon="slotProps">
                                     <slot name="incrementicon">
-                                        <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
+                                        <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('pcIncrementButton')['icon']" data-pc-group-section="timepickerlabel" />
                                     </slot>
                                 </template>
                             </Button>
                             <span v-bind="ptm('minute')" data-pc-group-section="timepickerlabel">{{ formattedCurrentMinute }}</span>
                             <Button
-                                :class="cx('decrementButton')"
+                                :class="cx('pcDecrementButton')"
                                 :aria-label="$primevue.config.locale.prevMinute"
                                 :disabled="disabled"
                                 @mousedown="onTimePickerElementMouseDown($event, 1, -1)"
@@ -397,12 +397,12 @@
                                 @keyup.enter="onTimePickerElementMouseUp($event)"
                                 @keyup.space="onTimePickerElementMouseUp($event)"
                                 v-bind="timepickerButtonProps"
-                                :pt="ptm('decrementButton')"
+                                :pt="ptm('pcDecrementButton')"
                                 data-pc-group-section="timepickerbutton"
                             >
                                 <template #icon="slotProps">
                                     <slot name="decrementicon">
-                                        <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
+                                        <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('pcDecrementButton')['icon']" data-pc-group-section="timepickerlabel" />
                                     </slot>
                                 </template>
                             </Button>
@@ -412,7 +412,7 @@
                         </div>
                         <div v-if="showSeconds" :class="cx('secondPicker')" v-bind="ptm('secondPicker')" data-pc-group-section="timepickerContainer">
                             <Button
-                                :class="cx('incrementButton')"
+                                :class="cx('pcIncrementButton')"
                                 :aria-label="$primevue.config.locale.nextSecond"
                                 :disabled="disabled"
                                 :unstyled="unstyled"
@@ -425,18 +425,18 @@
                                 @keyup.enter="onTimePickerElementMouseUp($event)"
                                 @keyup.space="onTimePickerElementMouseUp($event)"
                                 v-bind="timepickerButtonProps"
-                                :pt="ptm('incrementButton')"
+                                :pt="ptm('pcIncrementButton')"
                                 data-pc-group-section="timepickerbutton"
                             >
                                 <template #icon="slotProps">
                                     <slot name="incrementicon">
-                                        <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
+                                        <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[incrementIcon, slotProps.class]" v-bind="ptm('pcIncrementButton')['icon']" data-pc-group-section="timepickerlabel" />
                                     </slot>
                                 </template>
                             </Button>
                             <span v-bind="ptm('second')" data-pc-group-section="timepickerlabel">{{ formattedCurrentSecond }}</span>
                             <Button
-                                :class="cx('decrementButton')"
+                                :class="cx('pcDecrementButton')"
                                 :aria-label="$primevue.config.locale.prevSecond"
                                 :disabled="disabled"
                                 :unstyled="unstyled"
@@ -449,12 +449,12 @@
                                 @keyup.enter="onTimePickerElementMouseUp($event)"
                                 @keyup.space="onTimePickerElementMouseUp($event)"
                                 v-bind="timepickerButtonProps"
-                                :pt="ptm('decrementButton')"
+                                :pt="ptm('pcDecrementButton')"
                                 data-pc-group-section="timepickerbutton"
                             >
                                 <template #icon="slotProps">
                                     <slot name="decrementicon">
-                                        <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
+                                        <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[decrementIcon, slotProps.class]" v-bind="ptm('pcDecrementButton')['icon']" data-pc-group-section="timepickerlabel" />
                                     </slot>
                                 </template>
                             </Button>
@@ -464,36 +464,36 @@
                         </div>
                         <div v-if="hourFormat == '12'" :class="cx('ampmPicker')" v-bind="ptm('ampmPicker')">
                             <Button
-                                :class="cx('incrementButton')"
+                                :class="cx('pcIncrementButton')"
                                 :aria-label="$primevue.config.locale.am"
                                 :disabled="disabled"
                                 :unstyled="unstyled"
                                 @click="toggleAMPM($event)"
                                 @keydown="onContainerButtonKeydown"
                                 v-bind="timepickerButtonProps"
-                                :pt="ptm('incrementButton')"
+                                :pt="ptm('pcIncrementButton')"
                                 data-pc-group-section="timepickerbutton"
                             >
                                 <template #icon="slotProps">
                                     <slot name="incrementicon" :class="cx('incrementIcon')">
-                                        <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[cx('incrementIcon'), slotProps.class]" v-bind="ptm('incrementButton')['icon']" data-pc-group-section="timepickerlabel" />
+                                        <component :is="incrementIcon ? 'span' : 'ChevronUpIcon'" :class="[cx('incrementIcon'), slotProps.class]" v-bind="ptm('pcIncrementButton')['icon']" data-pc-group-section="timepickerlabel" />
                                     </slot>
                                 </template>
                             </Button>
                             <span v-bind="ptm('ampm')" data-pc-group-section="timepickerlabel">{{ pm ? $primevue.config.locale.pm : $primevue.config.locale.am }}</span>
                             <Button
-                                :class="cx('decrementButton')"
+                                :class="cx('pcDecrementButton')"
                                 :aria-label="$primevue.config.locale.pm"
                                 :disabled="disabled"
                                 @click="toggleAMPM($event)"
                                 @keydown="onContainerButtonKeydown"
                                 v-bind="timepickerButtonProps"
-                                :pt="ptm('decrementButton')"
+                                :pt="ptm('pcDecrementButton')"
                                 data-pc-group-section="timepickerbutton"
                             >
                                 <template #icon="slotProps">
                                     <slot name="decrementicon" :class="cx('decrementIcon')">
-                                        <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('decrementIcon'), slotProps.class]" v-bind="ptm('decrementButton')['icon']" data-pc-group-section="timepickerlabel" />
+                                        <component :is="decrementIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('decrementIcon'), slotProps.class]" v-bind="ptm('pcDecrementButton')['icon']" data-pc-group-section="timepickerlabel" />
                                     </slot>
                                 </template>
                             </Button>
@@ -503,21 +503,21 @@
                         <Button
                             :label="todayLabel"
                             @click="onTodayButtonClick($event)"
-                            :class="cx('todayButton')"
+                            :class="cx('pcTodayButton')"
                             :unstyled="unstyled"
                             @keydown="onContainerButtonKeydown"
                             v-bind="todayButtonProps"
-                            :pt="ptm('todayButton')"
+                            :pt="ptm('pcTodayButton')"
                             data-pc-group-section="button"
                         />
                         <Button
                             :label="clearLabel"
                             @click="onClearButtonClick($event)"
-                            :class="cx('clearButton')"
+                            :class="cx('pcClearButton')"
                             :unstyled="unstyled"
                             @keydown="onContainerButtonKeydown"
                             v-bind="clearButtonProps"
-                            :pt="ptm('clearButton')"
+                            :pt="ptm('pcClearButton')"
                             data-pc-group-section="button"
                         />
                     </div>
diff --git a/components/lib/datepicker/style/DatePickerStyle.js b/components/lib/datepicker/style/DatePickerStyle.js
index d1738879f..79a062308 100644
--- a/components/lib/datepicker/style/DatePickerStyle.js
+++ b/components/lib/datepicker/style/DatePickerStyle.js
@@ -350,7 +350,7 @@ const classes = {
             'p-focus': state.focused || state.overlayVisible
         }
     ],
-    input: 'p-datepicker-input',
+    pcInput: 'p-datepicker-input',
     dropdown: 'p-datepicker-dropdown',
     inputIconContainer: 'p-datepicker-input-icon-container',
     inputIcon: 'p-datepicker-input-icon',
@@ -366,12 +366,12 @@ const classes = {
     calendarContainer: 'p-datepicker-calendar-container',
     calendar: 'p-datepicker-calendar',
     header: 'p-datepicker-header',
-    previousButton: 'p-datepicker-prev-button',
+    pcPreviousButton: 'p-datepicker-prev-button',
     title: 'p-datepicker-title',
     viewMonth: 'p-datepicker-view-month p-link',
     viewYear: 'p-datepicker-view-year p-link',
     decade: 'p-datepicker-decade',
-    nextButton: 'p-datepicker-next-button',
+    pcNextButton: 'p-datepicker-next-button',
     dayView: 'p-datepicker-day-view',
     weekHeader: 'p-datepicker-weekheader p-disabled',
     weekNumber: 'p-datepicker-weeknumber',
@@ -386,15 +386,15 @@ const classes = {
     year: ({ instance, props, year }) => ['p-datepicker-year', { 'p-datepicker-year-selected': instance.isYearSelected(year.value), 'p-disabled': props.disabled || !year.selectable }],
     timePicker: 'p-datepicker-time-picker',
     hourPicker: 'p-datepicker-hour-picker',
-    incrementButton: 'p-datepicker-increment-button',
-    decrementButton: 'p-datepicker-decrement-button',
+    pcIncrementButton: 'p-datepicker-increment-button',
+    pcDecrementButton: 'p-datepicker-decrement-button',
     separator: 'p-datepicker-separator',
     minutePicker: 'p-datepicker-minute-picker',
     secondPicker: 'p-datepicker-second-picker',
     ampmPicker: 'p-datepicker-ampm-picker',
     buttonbar: 'p-datepicker-buttonbar',
-    todayButton: 'p-datepicker-today-button',
-    clearButton: 'p-datepicker-clear-button'
+    pcTodayButton: 'p-datepicker-today-button',
+    pcClearButton: 'p-datepicker-clear-button'
 };
 
 export default BaseStyle.extend({
diff --git a/components/lib/dialog/Dialog.d.ts b/components/lib/dialog/Dialog.d.ts
index dcef13543..e7dc2b876 100755
--- a/components/lib/dialog/Dialog.d.ts
+++ b/components/lib/dialog/Dialog.d.ts
@@ -82,12 +82,12 @@ export interface DialogPassThroughOptions<T = any> {
      * Used to pass attributes to the maximize Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    maximizeButton?: ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>;
+    pcMaximizeButton?: ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the close Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    closeButton?: ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>;
+    pcCloseButton?: ButtonPassThroughOptions<DialogSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the content's DOM element.
      */
diff --git a/components/lib/dialog/Dialog.vue b/components/lib/dialog/Dialog.vue
index 9a08c6723..cb039f8c1 100755
--- a/components/lib/dialog/Dialog.vue
+++ b/components/lib/dialog/Dialog.vue
@@ -14,17 +14,17 @@
                                     v-if="maximizable"
                                     :ref="maximizableRef"
                                     :autofocus="focusableMax"
-                                    :class="cx('maximizeButton')"
+                                    :class="cx('pcMaximizeButton')"
                                     @click="maximize"
                                     :tabindex="maximizable ? '0' : '-1'"
                                     :unstyled="unstyled"
                                     v-bind="maximizeButtonProps"
-                                    :pt="ptm('maximizeButton')"
+                                    :pt="ptm('pcMaximizeButton')"
                                     data-pc-group-section="headericon"
                                 >
                                     <template #icon="slotProps">
                                         <slot name="maximizeicon" :maximized="maximized">
-                                            <component :is="maximizeIconComponent" :class="[slotProps.class, maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('maximizeButton')['icon']" />
+                                            <component :is="maximizeIconComponent" :class="[slotProps.class, maximized ? minimizeIcon : maximizeIcon]" v-bind="ptm('pcMaximizeButton')['icon']" />
                                         </slot>
                                     </template>
                                 </Button>
@@ -32,17 +32,17 @@
                                     v-if="closable"
                                     :ref="closeButtonRef"
                                     :autofocus="focusableClose"
-                                    :class="cx('closeButton')"
+                                    :class="cx('pcCloseButton')"
                                     @click="close"
                                     :aria-label="closeAriaLabel"
                                     :unstyled="unstyled"
                                     v-bind="closeButtonProps"
-                                    :pt="ptm('closeButton')"
+                                    :pt="ptm('pcCloseButton')"
                                     data-pc-group-section="headericon"
                                 >
                                     <template #icon="slotProps">
-                                        <slot name="closeicon" :class="cx('closeButtonIcon')">
-                                            <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeButtonIcon'), closeIcon, slotProps.class]" v-bind="ptm('closeButton')['icon']"></component>
+                                        <slot name="closeicon">
+                                            <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[closeIcon, slotProps.class]" v-bind="ptm('pcCloseButton')['icon']"></component>
                                         </slot>
                                     </template>
                                 </Button>
diff --git a/components/lib/dialog/style/DialogStyle.js b/components/lib/dialog/style/DialogStyle.js
index 4c822e384..6cd0862ed 100644
--- a/components/lib/dialog/style/DialogStyle.js
+++ b/components/lib/dialog/style/DialogStyle.js
@@ -174,8 +174,8 @@ const classes = {
     header: 'p-dialog-header',
     title: 'p-dialog-title',
     headerActions: 'p-dialog-header-actions',
-    maximizeButton: 'p-dialog-maximize-button',
-    closeButton: 'p-dialog-close-button',
+    pcMaximizeButton: 'p-dialog-maximize-button',
+    pcCloseButton: 'p-dialog-close-button',
     content: 'p-dialog-content',
     footer: 'p-dialog-footer'
 };
diff --git a/components/lib/drawer/Drawer.d.ts b/components/lib/drawer/Drawer.d.ts
index b01ec7648..ac35bdfa9 100755
--- a/components/lib/drawer/Drawer.d.ts
+++ b/components/lib/drawer/Drawer.d.ts
@@ -79,10 +79,10 @@ export interface DrawerPassThroughOptions {
      */
     title?: DrawerPassThroughOptionType;
     /**
-     * Used to pass attributes to the previous button's DOM element.
+     * Used to pass attributes to the close button's DOM element.
      * @see {@link ButtonPassThroughOptions}
      */
-    toggler?: ButtonPassThroughOptions<DrawerSharedPassThroughMethodOptions>;
+    pcCloseButton?: ButtonPassThroughOptions<DrawerSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the content's DOM element.
      */
diff --git a/components/lib/drawer/Drawer.vue b/components/lib/drawer/Drawer.vue
index 82d141314..b181e8f76 100755
--- a/components/lib/drawer/Drawer.vue
+++ b/components/lib/drawer/Drawer.vue
@@ -13,17 +13,17 @@
                                 v-if="showCloseIcon"
                                 :ref="closeButtonRef"
                                 type="button"
-                                :class="cx('closeButton')"
+                                :class="cx('pcCloseButton')"
                                 :aria-label="closeAriaLabel"
                                 :unstyled="unstyled"
                                 @click="hide"
                                 v-bind="closeButtonProps"
-                                :pt="ptm('closeButton')"
+                                :pt="ptm('pcCloseButton')"
                                 data-pc-group-section="iconcontainer"
                             >
                                 <template #icon="slotProps">
-                                    <slot name="closeicon" :class="cx('closeIcon')">
-                                        <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[cx('closeIcon'), closeIcon, slotProps.class]" v-bind="ptm('closeButton')['icon']"></component>
+                                    <slot name="closeicon">
+                                        <component :is="closeIcon ? 'span' : 'TimesIcon'" :class="[closeIcon, slotProps.class]" v-bind="ptm('pcCloseButton')['icon']"></component>
                                     </slot>
                                 </template>
                             </Button>
diff --git a/components/lib/drawer/style/DrawerStyle.js b/components/lib/drawer/style/DrawerStyle.js
index 0e784e67d..f49f320b4 100644
--- a/components/lib/drawer/style/DrawerStyle.js
+++ b/components/lib/drawer/style/DrawerStyle.js
@@ -187,7 +187,7 @@ const classes = {
     ],
     header: 'p-drawer-header',
     title: 'p-drawer-title',
-    closeButton: 'p-drawer-close-button',
+    pcCloseButton: 'p-drawer-close-button',
     content: 'p-drawer-content'
 };
 
diff --git a/components/lib/fileupload/FileContent.vue b/components/lib/fileupload/FileContent.vue
index 148e26310..1c9d550ac 100644
--- a/components/lib/fileupload/FileContent.vue
+++ b/components/lib/fileupload/FileContent.vue
@@ -5,12 +5,12 @@
             <div :class="cx('fileName')" v-bind="ptm('fileName')">{{ file.name }}</div>
             <span :class="cx('fileSize')" v-bind="ptm('fileSize')">{{ formatSize(file.size) }}</span>
         </div>
-        <Badge :value="badgeValue" :class="cx('fileBadge')" :severity="badgeSeverity" :unstyled="unstyled" :pt="ptm('fileBadge')" />
+        <Badge :value="badgeValue" :class="cx('pcFileBadge')" :severity="badgeSeverity" :unstyled="unstyled" :pt="ptm('pcFileBadge')" />
         <div :class="cx('fileActions')" v-bind="ptm('fileActions')">
-            <Button @click="$emit('remove', index)" text rounded severity="danger" :class="cx('fileRemoveButton')" :unstyled="unstyled" :pt="ptm('fileRemoveButton')">
+            <Button @click="$emit('remove', index)" text rounded severity="danger" :class="cx('pcFileRemoveButton')" :unstyled="unstyled" :pt="ptm('pcFileRemoveButton')">
                 <template #icon="iconProps">
                     <component v-if="templates.fileremoveicon" :is="templates.fileremoveicon" :class="iconProps.class" :file="file" :index="index" />
-                    <TimesIcon v-else :class="iconProps.class" aria-hidden="true" v-bind="ptm('fileRemoveButton')['icon']" />
+                    <TimesIcon v-else :class="iconProps.class" aria-hidden="true" v-bind="ptm('pcFileRemoveButton')['icon']" />
                 </template>
             </Button>
         </div>
diff --git a/components/lib/fileupload/FileUpload.d.ts b/components/lib/fileupload/FileUpload.d.ts
index 65a1b7938..09c13b397 100755
--- a/components/lib/fileupload/FileUpload.d.ts
+++ b/components/lib/fileupload/FileUpload.d.ts
@@ -13,6 +13,7 @@ import { ComponentHooks } from '../basecomponent';
 import { ButtonPassThroughOptions } from '../button';
 import { MessagePassThroughOptions } from '../message';
 import { PassThroughOptions } from '../passthrough';
+import { ProgressBarPassThroughOptions } from '../progressbar';
 import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
 export declare type FileUploadPassThroughOptionType = FileUploadPassThroughAttributes | ((options: FileUploadPassThroughMethodOptions) => FileUploadPassThroughAttributes | string) | string | null | undefined;
@@ -207,33 +208,34 @@ export interface FileUploadPassThroughOptions {
      */
     header?: FileUploadPassThroughOptionType;
     /**
-     * Used to pass attributes to the choose button's DOM element.
+     * Used to pass attributes to the choose Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    chooseButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
+    pcChooseButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
     /**
-     * Used to pass attributes to the upload button's DOM element.
+     * Used to pass attributes to the upload Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    uploadButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
+    pcUploadButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
     /**
-     * Used to pass attributes to the cancel button's DOM element.
+     * Used to pass attributes to the cancel Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    cancelButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
+    pcCancelButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the content's DOM element.
      */
     content?: FileUploadPassThroughOptionType;
     /**
-     * Used to pass attributes to the progressbar's DOM element.
+     * Used to pass attributes to the ProgressBar component.
+     * @see {@link ProgressbarPassThroughOptions}
      */
-    progressbar?: FileUploadPassThroughOptionType;
+    pcProgressbar?: ProgressBarPassThroughOptions<FileUploadPassThroughMethodOptions>;
     /**
-     * Used to pass attributes to the messages' DOM element.
+     * Used to pass attributes to the message's DOM element.
      * @see {@link MessagePassThroughOptions}
      */
-    message?: MessagePassThroughOptions<FileUploadPassThroughMethodOptions>;
+    pcMessage?: MessagePassThroughOptions<FileUploadPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the file's DOM element.
      */
@@ -258,7 +260,7 @@ export interface FileUploadPassThroughOptions {
      * Used to pass attributes to the Badge component.
      * @see {@link BadgePassThroughOptions}
      */
-    fileBadge?: BadgePassThroughOptions<FileUploadPassThroughMethodOptions>;
+    pcFileBadge?: BadgePassThroughOptions<FileUploadPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the file actions' DOM element.
      */
@@ -267,16 +269,21 @@ export interface FileUploadPassThroughOptions {
      * Used to pass attributes to the file remove button's DOM element.
      * @see {@link ButtonPassThroughOptions}
      */
-    fileRemoveButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
+    pcFileRemoveButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the empty's DOM element.
      */
     empty?: FileUploadPassThroughOptionType;
+    /**
+     * Used to pass attributes to the messages' DOM element.
+     * @see {@link MessagePassThroughOptions}
+     */
+    pcMessages?: MessagePassThroughOptions<FileUploadPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the basic mode's button's DOM element.
      * @see {@link ButtonPassThroughOptions}
      */
-    button?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
+    pcButton?: ButtonPassThroughOptions<FileUploadPassThroughMethodOptions>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
diff --git a/components/lib/fileupload/FileUpload.vue b/components/lib/fileupload/FileUpload.vue
index 3c409c17b..eac2001e8 100755
--- a/components/lib/fileupload/FileUpload.vue
+++ b/components/lib/fileupload/FileUpload.vue
@@ -3,24 +3,24 @@
         <input ref="fileInput" type="file" @change="onFileSelect" :multiple="multiple" :accept="accept" :disabled="chooseDisabled" v-bind="ptm('input')" />
         <div :class="cx('header')" v-bind="ptm('header')">
             <slot name="header" :files="files" :uploadedFiles="uploadedFiles" :chooseCallback="choose" :uploadCallback="upload" :clearCallback="clear">
-                <Button :label="chooseButtonLabel" :class="chooseButtonClass" :style="style" :disabled="disabled" :unstyled="unstyled" @click="choose" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" :pt="ptm('chooseButton')">
+                <Button :label="chooseButtonLabel" :class="chooseButtonClass" :style="style" :disabled="disabled" :unstyled="unstyled" @click="choose" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" :pt="ptm('pcChooseButton')">
                     <template #icon="iconProps">
                         <slot name="chooseicon">
-                            <component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[iconProps.class, chooseIcon]" aria-hidden="true" v-bind="ptm('chooseButton')['icon']" />
+                            <component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[iconProps.class, chooseIcon]" aria-hidden="true" v-bind="ptm('pcChooseButton')['icon']" />
                         </slot>
                     </template>
                 </Button>
-                <Button v-if="showUploadButton" :class="cx('uploadButton')" :label="uploadButtonLabel" @click="upload" :disabled="uploadDisabled" :unstyled="unstyled" :pt="ptm('uploadButton')">
+                <Button v-if="showUploadButton" :class="cx('pcUploadButton')" :label="uploadButtonLabel" @click="upload" :disabled="uploadDisabled" :unstyled="unstyled" :pt="ptm('pcUploadButton')">
                     <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" />
+                            <component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, uploadIcon]" aria-hidden="true" v-bind="ptm('pcUploadButton')['icon']" data-pc-section="uploadbuttonicon" />
                         </slot>
                     </template>
                 </Button>
-                <Button v-if="showCancelButton" :class="cx('cancelButton')" :label="cancelButtonLabel" @click="clear" :disabled="cancelDisabled" :unstyled="unstyled" :pt="ptm('cancelButton')">
+                <Button v-if="showCancelButton" :class="cx('pcCancelButton')" :label="cancelButtonLabel" @click="clear" :disabled="cancelDisabled" :unstyled="unstyled" :pt="ptm('pcCancelButton')">
                     <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" />
+                            <component :is="cancelIcon ? 'span' : 'TimesIcon'" :class="[iconProps.class, cancelIcon]" aria-hidden="true" v-bind="ptm('pcCancelButton')['icon']" data-pc-section="cancelbuttonicon" />
                         </slot>
                     </template>
                 </Button>
@@ -29,12 +29,12 @@
         <div ref="content" :class="cx('content')" @dragenter="onDragEnter" @dragover="onDragOver" @dragleave="onDragLeave" @drop="onDrop" v-bind="ptm('content')" :data-p-highlight="false">
             <slot name="content" :files="files" :uploadedFiles="uploadedFiles" :removeUploadedFileCallback="removeUploadedFile" :removeFileCallback="remove" :progress="progress" :messages="messages">
                 <template v-if="hasFiles">
-                    <ProgressBar :value="progress" :showValue="false" :unstyled="unstyled" :pt="ptm('progressbar')" />
+                    <ProgressBar :value="progress" :showValue="false" :unstyled="unstyled" :pt="ptm('pcProgressbar')" />
                     <div v-if="hasFiles" :class="cx('fileList')">
                         <FileContent :files="files" @remove="remove" :badgeValue="pendingLabel" :previewWidth="previewWidth" :templates="$slots" :unstyled="unstyled" :pt="pt" />
                     </div>
                 </template>
-                <Message v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('message')">{{ msg }}</Message>
+                <Message v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('pcMessage')">{{ msg }}</Message>
                 <div v-if="hasUploadedFiles" :class="cx('fileList')">
                     <FileContent :files="uploadedFiles" @remove="removeUploadedFile" :badgeValue="completedLabel" badgeSeverity="success" :previewWidth="previewWidth" :templates="$slots" :unstyled="unstyled" :pt="pt" />
                 </div>
@@ -45,14 +45,14 @@
         </div>
     </div>
     <div v-else-if="isBasic" :class="cx('root')" v-bind="ptmi('root')">
-        <Message v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('messages')">{{ msg }}</Message>
-        <Button :label="basicChooseButtonLabel" :class="chooseButtonClass" :style="style" :disabled="disabled" :unstyled="unstyled" @mouseup="onBasicUploaderClick" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" v-bind="ptm('button')">
+        <Message v-for="msg of messages" :key="msg" severity="error" @close="onMessageClose" :unstyled="unstyled" :pt="ptm('pcMessages')">{{ msg }}</Message>
+        <Button :label="basicChooseButtonLabel" :class="chooseButtonClass" :style="style" :disabled="disabled" :unstyled="unstyled" @mouseup="onBasicUploaderClick" @keydown.enter="choose" @focus="onFocus" @blur="onBlur" v-bind="ptm('pcButton')">
             <template #icon="iconProps">
                 <slot v-if="!hasFiles || auto" name="uploadicon">
-                    <component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, uploadIcon]" aria-hidden="true" v-bind="ptm('button')['icon']" />
+                    <component :is="uploadIcon ? 'span' : 'UploadIcon'" :class="[iconProps.class, uploadIcon]" aria-hidden="true" v-bind="ptm('pcButton')['icon']" />
                 </slot>
-                <slot v-else name="chooseicon" :class="cx('chooseIcon')">
-                    <component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[iconProps.class, cx('chooseIcon'), chooseIcon]" aria-hidden="true" v-bind="ptm('button')['icon']" />
+                <slot v-else name="chooseicon">
+                    <component :is="chooseIcon ? 'span' : 'PlusIcon'" :class="[iconProps.class, chooseIcon]" aria-hidden="true" v-bind="ptm('pcButton')['icon']" />
                 </slot>
             </template>
         </Button>
@@ -372,7 +372,7 @@ export default {
             return this.mode === 'basic';
         },
         chooseButtonClass() {
-            return [this.cx('chooseButton'), this.class];
+            return [this.cx('pcChooseButton'), this.class];
         },
         basicChooseButtonLabel() {
             return this.auto ? this.chooseButtonLabel : this.hasFiles ? this.files.map((f) => f.name).join(', ') : this.chooseButtonLabel;
diff --git a/components/lib/fileupload/style/FileUploadStyle.js b/components/lib/fileupload/style/FileUploadStyle.js
index f02512035..eefa81f04 100644
--- a/components/lib/fileupload/style/FileUploadStyle.js
+++ b/components/lib/fileupload/style/FileUploadStyle.js
@@ -81,9 +81,9 @@ const theme = ({ dt }) => `
 const classes = {
     root: ({ props }) => [`p-fileupload p-fileupload-${props.mode} p-component`],
     header: 'p-fileupload-header',
-    chooseButton: 'p-fileupload-choose-button',
-    uploadButton: 'p-fileupload-upload-button',
-    clearButton: 'p-fileupload-clear-button',
+    pcChooseButton: 'p-fileupload-choose-button',
+    pcUploadButton: 'p-fileupload-upload-button',
+    pcCancelButton: 'p-fileupload-cancel-button',
     content: 'p-fileupload-content',
     fileList: 'p-fileupload-file-list',
     file: 'p-fileupload-file',
@@ -91,9 +91,9 @@ const classes = {
     fileInfo: 'p-fileupload-file-info',
     fileName: 'p-fileupload-file-name',
     fileSize: 'p-fileupload-file-size',
-    fileBadge: 'p-fileupload-file-badge',
+    pcFileBadge: 'p-fileupload-file-badge',
     fileActions: 'p-fileupload-file-actions',
-    fileRemoveButton: 'p-fileupload-file-remove-button'
+    pcFileRemoveButton: 'p-fileupload-file-remove-button'
 };
 
 export default BaseStyle.extend({
diff --git a/components/lib/inputchips/InputChips.d.ts b/components/lib/inputchips/InputChips.d.ts
index 11512117a..d2d6dc71b 100755
--- a/components/lib/inputchips/InputChips.d.ts
+++ b/components/lib/inputchips/InputChips.d.ts
@@ -102,7 +102,7 @@ export interface InputChipsPassThroughOptions {
      * Used to pass attributes to the Chip component.
      * @see {@link ChipPassThroughOptions}
      */
-    chipLabel?: ChipPassThroughOptions<InputChipsSharedPassThroughMethodOptions>;
+    pcChipLabel?: ChipPassThroughOptions<InputChipsSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the chip icon's DOM element.
      */
diff --git a/components/lib/inputchips/InputChips.vue b/components/lib/inputchips/InputChips.vue
index 598393c3f..ee9d6842f 100755
--- a/components/lib/inputchips/InputChips.vue
+++ b/components/lib/inputchips/InputChips.vue
@@ -28,9 +28,9 @@
                 v-bind="ptm('chip')"
                 :data-p-focused="focusedIndex === i"
             >
-                <slot name="chip" :class="cx('chipLabel')" :index="i" :value="val" :removeCallback="(event) => removeOption(event, i)">
+                <slot name="chip" :class="cx('pcChipLabel')" :index="i" :value="val" :removeCallback="(event) => removeOption(event, i)">
                     <!-- TODO: removetokenicon and removeTokenIcon  deprecated since v4.0. Use chipicon slot and chipIcon prop-->
-                    <Chip :class="cx('chipLabel')" :label="val" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeItem($event, i)" :pt="ptm('chipLabel')">
+                    <Chip :class="cx('pcChipLabel')" :label="val" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeItem($event, i)" :pt="ptm('pcChipLabel')">
                         <template #removeicon>
                             <slot :name="$slots.chipicon ? 'chipicon' : 'removetokenicon'" :class="cx('chipIcon')" :index="i" :removeCallback="(event) => removeItem(event, i)" />
                         </template>
diff --git a/components/lib/inputchips/style/InputChipsStyle.js b/components/lib/inputchips/style/InputChipsStyle.js
index 6bb99b4cd..d4dd42164 100644
--- a/components/lib/inputchips/style/InputChipsStyle.js
+++ b/components/lib/inputchips/style/InputChipsStyle.js
@@ -102,7 +102,7 @@ const classes = {
         }
     ],
     chip: ({ state, index }) => ['p-inputchips-chip', { 'p-focus': state.focusedIndex === index }],
-    chipLabel: 'p-inputchips-chip-label',
+    pcChipLabel: 'p-inputchips-chip-label',
     chipIcon: 'p-inputchips-chip-icon',
     inputItem: 'p-inputchips-input-item'
 };
diff --git a/components/lib/inputnumber/InputNumber.d.ts b/components/lib/inputnumber/InputNumber.d.ts
index 709ed4c17..9721d2e19 100755
--- a/components/lib/inputnumber/InputNumber.d.ts
+++ b/components/lib/inputnumber/InputNumber.d.ts
@@ -104,7 +104,7 @@ export interface InputNumberPassThroughOptions<T = any> {
      * Used to pass attributes to the InputText component.
      * @see {@link InputTextPassThroughOptions}
      */
-    input?: InputTextPassThroughOptions<InputNumberSharedPassThroughMethodOptions>;
+    pcInput?: InputTextPassThroughOptions<InputNumberSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the button group's DOM element.
      */
diff --git a/components/lib/inputnumber/InputNumber.vue b/components/lib/inputnumber/InputNumber.vue
index 6db6c0981..2880c4a4c 100755
--- a/components/lib/inputnumber/InputNumber.vue
+++ b/components/lib/inputnumber/InputNumber.vue
@@ -4,7 +4,7 @@
             ref="input"
             :id="inputId"
             role="spinbutton"
-            :class="[cx('input'), inputClass]"
+            :class="[cx('pcInput'), inputClass]"
             :style="inputStyle"
             :value="formattedValue"
             :aria-valuemin="min"
@@ -25,7 +25,7 @@
             @click="onInputClick"
             @focus="onInputFocus"
             @blur="onInputBlur"
-            :pt="ptm('input')"
+            :pt="ptm('pcInput')"
             :unstyled="unstyled"
         />
         <span v-if="showButtons && buttonLayout === 'stacked'" :class="cx('buttonGroup')" v-bind="ptm('buttonGroup')">
diff --git a/components/lib/inputnumber/style/InputNumberStyle.js b/components/lib/inputnumber/style/InputNumberStyle.js
index b8290bb6c..de556eee7 100644
--- a/components/lib/inputnumber/style/InputNumberStyle.js
+++ b/components/lib/inputnumber/style/InputNumberStyle.js
@@ -159,7 +159,7 @@ const classes = {
             'p-inputnumber-vertical': props.showButtons && props.buttonLayout === 'vertical'
         }
     ],
-    input: 'p-inputnumber-input',
+    pcInput: 'p-inputnumber-input',
     buttonGroup: 'p-inputnumber-button-group',
     incrementButton: ({ instance, props }) => [
         'p-inputnumber-button p-inputnumber-increment-button',
diff --git a/components/lib/inputotp/InputOtp.d.ts b/components/lib/inputotp/InputOtp.d.ts
index 23b2818c4..dd78821d1 100755
--- a/components/lib/inputotp/InputOtp.d.ts
+++ b/components/lib/inputotp/InputOtp.d.ts
@@ -68,7 +68,7 @@ export interface InputOtpPassThroughOptions {
      * Used to pass attributes to the InputText component.
      * @see {@link InputTextPassThroughOptions}
      */
-    input?: InputTextPassThroughOptions<InputOtpSharedPassThroughMethodOptions>;
+    pcInput?: InputTextPassThroughOptions<InputOtpSharedPassThroughMethodOptions>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
diff --git a/components/lib/inputotp/InputOtp.vue b/components/lib/inputotp/InputOtp.vue
index 342ca421b..e40668dd5 100755
--- a/components/lib/inputotp/InputOtp.vue
+++ b/components/lib/inputotp/InputOtp.vue
@@ -5,7 +5,7 @@
                 <OtpInputText
                     :value="tokens[i - 1]"
                     :type="inputType"
-                    :class="cx('input')"
+                    :class="cx('pcInput')"
                     :inputmode="inputMode"
                     :variant="variant"
                     :readonly="readonly"
@@ -18,7 +18,7 @@
                     @blur="onBlur($event)"
                     @paste="onPaste($event)"
                     @keydown="onKeyDown($event)"
-                    :pt="ptm('input')"
+                    :pt="ptm('pcInput')"
                 />
             </slot>
         </template>
diff --git a/components/lib/inputotp/style/InputOtpStyle.js b/components/lib/inputotp/style/InputOtpStyle.js
index b55f35b70..6eb2e8552 100644
--- a/components/lib/inputotp/style/InputOtpStyle.js
+++ b/components/lib/inputotp/style/InputOtpStyle.js
@@ -15,7 +15,7 @@ const theme = ({ dt }) => `
 
 const classes = {
     root: 'p-inputotp p-component',
-    input: 'p-inputotp-input'
+    pcInput: 'p-inputotp-input'
 };
 
 export default BaseStyle.extend({
diff --git a/components/lib/listbox/Listbox.d.ts b/components/lib/listbox/Listbox.d.ts
index f84775925..d78bb5fa3 100755
--- a/components/lib/listbox/Listbox.d.ts
+++ b/components/lib/listbox/Listbox.d.ts
@@ -130,7 +130,7 @@ export interface ListboxPassThroughOptions<T = any> {
      * Used to pass attributes to the InputText component.
      * @see {@link InputTextPassThroughOptions}
      */
-    filter?: InputTextPassThroughOptions<ListboxSharedPassThroughMethodOptions>;
+    pcFilter?: InputTextPassThroughOptions<ListboxSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the filter icon's DOM element.
      */
diff --git a/components/lib/listbox/Listbox.vue b/components/lib/listbox/Listbox.vue
index ab3e9bd40..e5406ebe3 100755
--- a/components/lib/listbox/Listbox.vue
+++ b/components/lib/listbox/Listbox.vue
@@ -19,7 +19,7 @@
                 <InputText
                     v-model="filterValue"
                     type="text"
-                    :class="cx('filter')"
+                    :class="cx('pcFilter')"
                     :placeholder="filterPlaceholder"
                     role="searchbox"
                     autocomplete="off"
@@ -32,7 +32,7 @@
                     @input="onFilterChange"
                     @blur="onFilterBlur"
                     @keydown="onFilterKeyDown"
-                    :pt="ptm('filter')"
+                    :pt="ptm('pcFilter')"
                 />
 
                 <slot name="filtericon" :class="cx('filterIcon')">
diff --git a/components/lib/listbox/style/ListboxStyle.js b/components/lib/listbox/style/ListboxStyle.js
index d91ee9be1..7e807065e 100644
--- a/components/lib/listbox/style/ListboxStyle.js
+++ b/components/lib/listbox/style/ListboxStyle.js
@@ -126,7 +126,7 @@ const classes = {
     ],
     header: 'p-listbox-header',
     filterContainer: 'p-listbox-filter-container',
-    filter: 'p-listbox-filter',
+    pcFilter: 'p-listbox-filter',
     filterIcon: 'p-listbox-filter-icon',
     listContainer: 'p-listbox-list-container',
     list: 'p-listbox-list',
diff --git a/components/lib/multiselect/MultiSelect.d.ts b/components/lib/multiselect/MultiSelect.d.ts
index 9d987d18c..46864b681 100755
--- a/components/lib/multiselect/MultiSelect.d.ts
+++ b/components/lib/multiselect/MultiSelect.d.ts
@@ -137,7 +137,7 @@ export interface MultiSelectPassThroughOptions {
      * Used to pass attributes to the Chip.
      * @see {@link ChipPassThroughOptions}
      */
-    chipLabel?: ChipPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>;
+    pcChipLabel?: ChipPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the chip icon's DOM element.
      */
@@ -161,7 +161,7 @@ export interface MultiSelectPassThroughOptions {
     /**
      * Used to pass attributes to the header checkbox's DOM element.
      */
-    headerCheckbox?: MultiSelectPassThroughOptionType;
+    pcHeaderCheckbox?: MultiSelectPassThroughOptionType;
     /**
      * Used to pass attributes to the filter container's DOM element.
      */
@@ -170,7 +170,7 @@ export interface MultiSelectPassThroughOptions {
      * Used to pass attributes to the InputText component.
      * @see {@link InputTextPassThroughOptions}
      */
-    filter?: InputTextPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>;
+    pcFilter?: InputTextPassThroughOptions<MultiSelectSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the filter icon's DOM element.
      */
@@ -203,7 +203,7 @@ export interface MultiSelectPassThroughOptions {
     /**
      * Used to pass attributes to the option checkbox's DOM element.
      */
-    optionCheckbox?: MultiSelectPassThroughOptionType;
+    pcOptionCheckbox?: MultiSelectPassThroughOptionType;
     /**
      * Used to pass attributes to the emptyMessage's DOM element.
      */
diff --git a/components/lib/multiselect/MultiSelect.vue b/components/lib/multiselect/MultiSelect.vue
index 4c520d09c..9b6d75428 100755
--- a/components/lib/multiselect/MultiSelect.vue
+++ b/components/lib/multiselect/MultiSelect.vue
@@ -33,7 +33,7 @@
                         <span v-for="item of chipSelectedItems" :key="getLabelByValue(item)" :class="cx('chip')" v-bind="ptm('chip')">
                             <slot name="chip" :value="item" :removeCallback="(event) => removeOption(event, item)">
                                 <!-- TODO: removetokenicon and removeTokenIcon  deprecated since v4.0. Use chipicon slot and chipIcon prop-->
-                                <Chip :class="cx('chipLabel')" :label="getLabelByValue(item)" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeOption($event, item)" :pt="ptm('chipLabel')">
+                                <Chip :class="cx('pcChipLabel')" :label="getLabelByValue(item)" :removeIcon="chipIcon || removeTokenIcon" removable :unstyled="unstyled" @remove="removeOption($event, item)" :pt="ptm('pcChipLabel')">
                                     <template #removeicon>
                                         <slot :name="$slots.chipicon ? 'chipicon' : 'removetokenicon'" :class="cx('chipIcon')" :item="item" :removeCallback="(event) => removeOption(event, item)" />
                                     </template>
@@ -79,11 +79,11 @@
                             :aria-label="toggleAllAriaLabel"
                             @change="onToggleAll"
                             :unstyled="unstyled"
-                            :pt="getHeaderCheckboxPTOptions('headerCheckbox')"
+                            :pt="getHeaderCheckboxPTOptions('pcHeaderCheckbox')"
                         >
                             <template #icon="slotProps">
                                 <component v-if="$slots.headercheckboxicon" :is="$slots.headercheckboxicon" :checked="slotProps.checked" :class="slotProps.class" />
-                                <component v-else-if="slotProps.checked" :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="[slotProps.class, { [checkboxIcon]: slotProps.checked }]" v-bind="getHeaderCheckboxPTOptions('headerCheckbox.icon')" />
+                                <component v-else-if="slotProps.checked" :is="checkboxIcon ? 'span' : 'CheckIcon'" :class="[slotProps.class, { [checkboxIcon]: slotProps.checked }]" v-bind="getHeaderCheckboxPTOptions('pcHeaderCheckbox.icon')" />
                             </template>
                         </Checkbox>
                         <div v-if="filter" :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
@@ -92,7 +92,7 @@
                                 :value="filterValue"
                                 @vue:mounted="onFilterUpdated"
                                 @vue:updated="onFilterUpdated"
-                                :class="cx('filter')"
+                                :class="cx('pcFilter')"
                                 :placeholder="filterPlaceholder"
                                 :invalid="invalid"
                                 :disabled="disabled"
@@ -105,7 +105,7 @@
                                 @keydown="onFilterKeyDown"
                                 @blur="onFilterBlur"
                                 @input="onFilterChange"
-                                :pt="ptm('filter')"
+                                :pt="ptm('pcFilter')"
                             />
                             <slot name="filtericon" :class="cx('filterIcon')">
                                 <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
@@ -149,14 +149,14 @@
                                             :data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
                                             :data-p-disabled="isOptionDisabled(option)"
                                         >
-                                            <Checkbox :modelValue="isSelected(option)" :binary="true" :tabindex="-1" :variant="variant" :unstyled="unstyled" :pt="getCheckboxPTOptions(option, getItemOptions, i, 'optionCheckbox')">
+                                            <Checkbox :modelValue="isSelected(option)" :binary="true" :tabindex="-1" :variant="variant" :unstyled="unstyled" :pt="getCheckboxPTOptions(option, getItemOptions, i, 'pcOptionCheckbox')">
                                                 <template #icon="slotProps">
                                                     <component v-if="$slots.optioncheckboxicon || $slots.itemcheckboxicon" :is="$slots.optioncheckboxicon || $slots.itemcheckboxicon" :checked="slotProps.checked" :class="slotProps.class" />
                                                     <component
                                                         v-else-if="slotProps.checked"
                                                         :is="checkboxIcon ? 'span' : 'CheckIcon'"
                                                         :class="[slotProps.class, { [checkboxIcon]: slotProps.checked }]"
-                                                        v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'optionCheckbox.icon')"
+                                                        v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'pcOptionCheckbox.icon')"
                                                     />
                                                 </template>
                                             </Checkbox>
diff --git a/components/lib/multiselect/style/MultiSelectStyle.js b/components/lib/multiselect/style/MultiSelectStyle.js
index 67610645e..0b6aaa82d 100644
--- a/components/lib/multiselect/style/MultiSelectStyle.js
+++ b/components/lib/multiselect/style/MultiSelectStyle.js
@@ -230,7 +230,7 @@ const classes = {
         }
     ],
     chip: 'p-multiselect-chip',
-    chipLabel: 'p-multiselect-chip-label',
+    pcChipLabel: 'p-multiselect-chip-label',
     chipIcon: 'p-multiselect-chip-icon',
     dropdown: 'p-multiselect-dropdown',
     loadingIcon: 'p-multiselect-loading-icon',
@@ -243,7 +243,7 @@ const classes = {
     ],
     header: 'p-multiselect-header',
     filterContainer: 'p-multiselect-filter-container',
-    filter: 'p-multiselect-filter',
+    pcFilter: 'p-multiselect-filter',
     filterIcon: 'p-multiselect-filter-icon',
     listContainer: 'p-multiselect-list-container',
     list: 'p-multiselect-list',
diff --git a/components/lib/orderlist/OrderList.d.ts b/components/lib/orderlist/OrderList.d.ts
index 23df9e8f6..1be08cd4c 100755
--- a/components/lib/orderlist/OrderList.d.ts
+++ b/components/lib/orderlist/OrderList.d.ts
@@ -113,22 +113,22 @@ export interface OrderListPassThroughOptions {
      * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    moveUpButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
+    pcMoveUpButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    moveTopButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
+    pcMoveTopButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    moveDownButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
+    pcMoveDownButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    moveBottomButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
+    pcMoveBottomButton?: ButtonPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the container's DOM element.
      */
@@ -137,7 +137,7 @@ export interface OrderListPassThroughOptions {
      * Used to pass attributes to the Listbox component.
      * @see {@link ListboxPassThroughOptions}
      */
-    list?: ListboxPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
+    pcList?: ListboxPassThroughOptions<OrderListSharedPassThroughMethodOptions>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
diff --git a/components/lib/orderlist/OrderList.vue b/components/lib/orderlist/OrderList.vue
index 3f4a36d7c..38b9d826b 100755
--- a/components/lib/orderlist/OrderList.vue
+++ b/components/lib/orderlist/OrderList.vue
@@ -2,31 +2,31 @@
     <div :class="cx('root')" v-bind="ptmi('root')">
         <div :class="cx('controls')" v-bind="ptm('controls')">
             <slot name="controlsstart"></slot>
-            <Button @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveUpButtonProps }" :pt="ptm('moveUpButton')" :unstyled="unstyled">
+            <Button @click="moveUp" :aria-label="moveUpAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveUpButtonProps }" :pt="ptm('pcMoveUpButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="moveupicon">
-                        <AngleUpIcon v-bind="ptm('moveUpButton')['icon']" data-pc-section="moveupicon" />
+                        <AngleUpIcon v-bind="ptm('pcMoveUpButton')['icon']" data-pc-section="moveupicon" />
                     </slot>
                 </template>
             </Button>
-            <Button @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveTopButtonProps }" :pt="ptm('moveTopButton')" :unstyled="unstyled">
+            <Button @click="moveTop" :aria-label="moveTopAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveTopButtonProps }" :pt="ptm('pcMoveTopButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movetopicon">
-                        <AngleDoubleUpIcon v-bind="ptm('moveTopButton')['icon']" data-pc-section="movetopicon" />
+                        <AngleDoubleUpIcon v-bind="ptm('pcMoveTopButton')['icon']" data-pc-section="movetopicon" />
                     </slot>
                 </template>
             </Button>
-            <Button @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveDownButtonProps }" :pt="ptm('moveDownButton')" :unstyled="unstyled">
+            <Button @click="moveDown" :aria-label="moveDownAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveDownButtonProps }" :pt="ptm('pcMoveDownButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movedownicon">
-                        <AngleDownIcon v-bind="ptm('moveDownButton')['icon']" data-pc-section="movedownicon" />
+                        <AngleDownIcon v-bind="ptm('pcMoveDownButton')['icon']" data-pc-section="movedownicon" />
                     </slot>
                 </template>
             </Button>
-            <Button @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveBottomButtonProps }" :pt="ptm('moveBottomButton')" :unstyled="unstyled">
+            <Button @click="moveBottom" :aria-label="moveBottomAriaLabel" :disabled="moveDisabled()" v-bind="{ ...buttonProps, ...moveBottomButtonProps }" :pt="ptm('pcMoveBottomButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movebottomicon">
-                        <AngleDoubleDownIcon v-bind="ptm('moveBottomButton')['icon']" data-pc-section="movebottomicon" />
+                        <AngleDoubleDownIcon v-bind="ptm('pcMoveBottomButton')['icon']" data-pc-section="movebottomicon" />
                     </slot>
                 </template>
             </Button>
@@ -49,7 +49,7 @@
             :disabled="disabled"
             :ariaLabel="ariaLabel"
             :ariaLabelledby="ariaLabelledby"
-            :pt="ptm('list')"
+            :pt="ptm('pcList')"
             :unstyled="unstyled"
             @focus="onListFocus"
             @blur="onListBlur"
diff --git a/components/lib/paginator/JumpToPageDropdown.vue b/components/lib/paginator/JumpToPageDropdown.vue
index 45dd6a74b..5737d721c 100644
--- a/components/lib/paginator/JumpToPageDropdown.vue
+++ b/components/lib/paginator/JumpToPageDropdown.vue
@@ -5,10 +5,10 @@
         optionLabel="label"
         optionValue="value"
         @update:modelValue="onChange($event)"
-        :class="cx('jumpToPageDropdown')"
+        :class="cx('pcJumpToPageDropdown')"
         :disabled="disabled"
         :unstyled="unstyled"
-        :pt="ptm('jumpToPageDropdown')"
+        :pt="ptm('pcJumpToPageDropdown')"
         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 f02c82ad5..2254140e6 100644
--- a/components/lib/paginator/JumpToPageInput.vue
+++ b/components/lib/paginator/JumpToPageInput.vue
@@ -1,5 +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')"></JTPInput>
+    <JTPInput ref="jtpInput" :modelValue="d_page" :class="cx('pcJumpToPageInput')" :aria-label="inputArialabel" :disabled="disabled" @update:modelValue="onChange" :unstyled="unstyled" :pt="ptm('pcJumpToPageInput')"></JTPInput>
 </template>
 
 <script>
diff --git a/components/lib/paginator/Paginator.d.ts b/components/lib/paginator/Paginator.d.ts
index 0c8e88bc9..9a98a266b 100755
--- a/components/lib/paginator/Paginator.d.ts
+++ b/components/lib/paginator/Paginator.d.ts
@@ -125,17 +125,17 @@ export interface PaginatorPassThroughOptions<T = any> {
      * Used to pass attributes to the Dropdown component.
      * @see {@link DropdownPassThroughOptions}
      */
-    rowPerPageDropdown?: DropdownPassThroughOptions<PaginatorSharedPassThroughMethodOptions>;
+    pcRowPerPageDropdown?: DropdownPassThroughOptions<PaginatorSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Dropdown component.
      * @see {@link DropdownPassThroughOptions}
      */
-    jumpToPageDropdown?: DropdownPassThroughOptions<PaginatorSharedPassThroughMethodOptions>;
+    pcJumpToPageDropdown?: DropdownPassThroughOptions<PaginatorSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Dropdown component.
      * @see {@link InputNumberPassThroughOptions}
      */
-    jumpToPageInput?: InputNumberPassThroughOptions<PaginatorSharedPassThroughMethodOptions>;
+    pcJumpToPageInput?: InputNumberPassThroughOptions<PaginatorSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the content end's DOM element.
      */
diff --git a/components/lib/paginator/RowsPerPageDropdown.vue b/components/lib/paginator/RowsPerPageDropdown.vue
index b678aee83..99d82c4b9 100755
--- a/components/lib/paginator/RowsPerPageDropdown.vue
+++ b/components/lib/paginator/RowsPerPageDropdown.vue
@@ -5,10 +5,10 @@
         optionLabel="label"
         optionValue="value"
         @update:modelValue="onChange($event)"
-        :class="cx('rowPerPageDropdown')"
+        :class="cx('pcRowPerPageDropdown')"
         :disabled="disabled"
         :unstyled="unstyled"
-        :pt="ptm('rowPerPageDropdown')"
+        :pt="ptm('pcRowPerPageDropdown')"
         data-pc-group-section="pagedropdown"
     >
         <template v-if="templates['rowsperpagedropdownicon']" #dropdownicon="slotProps">
diff --git a/components/lib/paginator/style/PaginatorStyle.js b/components/lib/paginator/style/PaginatorStyle.js
index 668e398aa..ca064c79c 100644
--- a/components/lib/paginator/style/PaginatorStyle.js
+++ b/components/lib/paginator/style/PaginatorStyle.js
@@ -130,9 +130,9 @@ const classes = {
         }
     ],
     current: 'p-paginator-current',
-    rowPerPageDropdown: 'p-paginator-rpp-dropdown',
-    jumpToPageDropdown: 'p-paginator-jtp-dropdown',
-    jumpToPageInput: 'p-paginator-jtp-input'
+    pcRowPerPageDropdown: 'p-paginator-rpp-dropdown',
+    pcJumpToPageDropdown: 'p-paginator-jtp-dropdown',
+    pcJumpToPageInput: 'p-paginator-jtp-input'
 };
 
 export default BaseStyle.extend({
diff --git a/components/lib/panel/Panel.d.ts b/components/lib/panel/Panel.d.ts
index ba4614dd6..bb9d7de5f 100755
--- a/components/lib/panel/Panel.d.ts
+++ b/components/lib/panel/Panel.d.ts
@@ -101,7 +101,7 @@ export interface PanelPassThroughOptions {
      * Used to pass attributes to the toggle button button's DOM element.
      * @see {@link ButtonPassThroughOptions}
      */
-    toggleButton?: ButtonPassThroughOptions<PanelSharedPassThroughMethodOptions>;
+    pcToggleButton?: ButtonPassThroughOptions<PanelSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the content container's DOM element.
      */
diff --git a/components/lib/panel/Panel.vue b/components/lib/panel/Panel.vue
index 0561a8082..17cd00705 100755
--- a/components/lib/panel/Panel.vue
+++ b/components/lib/panel/Panel.vue
@@ -9,7 +9,7 @@
                 <Button
                     v-if="toggleable"
                     :id="id + '_header'"
-                    :class="cx('toggleButton')"
+                    :class="cx('pcToggleButton')"
                     :aria-label="buttonAriaLabel"
                     :aria-controls="id + '_content'"
                     :aria-expanded="!d_collapsed"
@@ -17,12 +17,12 @@
                     @click="toggle"
                     @keydown="onKeyDown"
                     v-bind="toggleButtonProps"
-                    :pt="ptm('toggleButton')"
+                    :pt="ptm('pcToggleButton')"
                 >
                     <template #icon="slotProps">
                         <!--TODO: togglericon deprecated since v4.0-->
                         <slot :name="$slots.toggleicon ? 'toggleicon' : 'togglericon'" :collapsed="d_collapsed">
-                            <component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="slotProps.class" v-bind="ptm('toggleButton')['icon']" />
+                            <component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="slotProps.class" v-bind="ptm('pcToggleButton')['icon']" />
                         </slot>
                     </template>
                 </Button>
diff --git a/components/lib/panel/style/PanelStyle.js b/components/lib/panel/style/PanelStyle.js
index b6b33dc6c..66a2736fc 100644
--- a/components/lib/panel/style/PanelStyle.js
+++ b/components/lib/panel/style/PanelStyle.js
@@ -43,7 +43,7 @@ const classes = {
     header: 'p-panel-header',
     title: 'p-panel-title',
     headerActions: 'p-panel-header-actions',
-    toggleButton: 'p-panel-toggle-button',
+    pcToggleButton: 'p-panel-toggle-button',
     contentContainer: 'p-panel-content-container',
     content: 'p-panel-content',
     footer: 'p-panel-footer'
diff --git a/components/lib/password/Password.d.ts b/components/lib/password/Password.d.ts
index 2829523bb..76460aecc 100755
--- a/components/lib/password/Password.d.ts
+++ b/components/lib/password/Password.d.ts
@@ -74,7 +74,7 @@ export interface PasswordPassThroughOptions {
      * Used to pass attributes to the InputText component.
      * @see {@link InputTextPassThroughOptions}
      */
-    input?: InputTextPassThroughOptions<PasswordSharedPassThroughMethodOptions>;
+    ptInput?: InputTextPassThroughOptions<PasswordSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the mask icon's DOM element.
      */
diff --git a/components/lib/password/Password.vue b/components/lib/password/Password.vue
index 971fc85bc..8239bd3b7 100755
--- a/components/lib/password/Password.vue
+++ b/components/lib/password/Password.vue
@@ -4,7 +4,7 @@
             ref="input"
             :id="inputId"
             :type="inputType"
-            :class="[cx('input'), inputClass]"
+            :class="[cx('ptInput'), inputClass]"
             :style="inputStyle"
             :value="modelValue"
             :aria-labelledby="ariaLabelledby"
@@ -23,7 +23,7 @@
             @keyup="onKeyUp"
             @invalid="onInvalid"
             v-bind="inputProps"
-            :pt="ptm('input')"
+            :pt="ptm('ptInput')"
             :unstyled="unstyled"
         />
         <!-- TODO: hide* and show* deprecated since v4.0-->
diff --git a/components/lib/password/style/PasswordStyle.js b/components/lib/password/style/PasswordStyle.js
index d020a3447..e2f7dc559 100644
--- a/components/lib/password/style/PasswordStyle.js
+++ b/components/lib/password/style/PasswordStyle.js
@@ -81,7 +81,7 @@ const classes = {
             'p-inputwrapper-focus': instance.focused
         }
     ],
-    input: 'p-password-input',
+    ptInput: 'p-password-input',
     maskIcon: 'p-password-toggle-mask-icon p-password-mask-icon',
     unmaskIcon: 'p-password-toggle-mask-icon p-password-unmask-icon',
     overlay: ({ instance }) => [
diff --git a/components/lib/picklist/PickList.d.ts b/components/lib/picklist/PickList.d.ts
index f8adf79e1..067cbf1c0 100755
--- a/components/lib/picklist/PickList.d.ts
+++ b/components/lib/picklist/PickList.d.ts
@@ -10,6 +10,7 @@
 import { TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
 import { ButtonPassThroughOptions } from '../button';
+import { ListboxPassThroughOptions } from '../listbox';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
@@ -155,19 +156,23 @@ export interface PickListPassThroughOptions {
     /**
      * Used to pass attributes to the Button component.
      */
-    sourceMoveUpButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
+    pcSourceMoveUpButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      */
-    sourceMoveTopButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
+    pcSourceMoveTopButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      */
-    sourceMoveDownButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
+    pcSourceMoveDownButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      */
-    sourceMoveBottomButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
+    pcSourceMoveBottomButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
+    /**
+     * Used to pass attributes to the Listbox component.
+     */
+    pcList?: ListboxPassThroughOptions<PickListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the source list containerr's DOM element.
      */
@@ -215,19 +220,19 @@ export interface PickListPassThroughOptions {
     /**
      * Used to pass attributes to the Button component.
      */
-    targetMoveUpButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
+    pcTargetMoveUpButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      */
-    targetMoveTopButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
+    pcTargetMoveTopButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      */
-    targetMoveDownButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
+    pcTargetMoveDownButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      */
-    targetMoveBottomButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
+    pcTargetMoveBottomButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
diff --git a/components/lib/picklist/PickList.vue b/components/lib/picklist/PickList.vue
index 2924a995a..16c4b52a4 100755
--- a/components/lib/picklist/PickList.vue
+++ b/components/lib/picklist/PickList.vue
@@ -2,31 +2,31 @@
     <div :class="cx('root')" v-bind="ptmi('root')">
         <div v-if="showSourceControls" :class="cx('sourceControls')" v-bind="ptm('sourceControls')" data-pc-group-section="controls">
             <slot name="sourcecontrolsstart"></slot>
-            <Button :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" @click="moveUp($event, 0)" v-bind="{ ...buttonProps, ...moveUpButtonProps }" :pt="ptm('sourceMoveUpButton')" :unstyled="unstyled">
+            <Button :aria-label="moveUpAriaLabel" :disabled="moveDisabled(0)" @click="moveUp($event, 0)" v-bind="{ ...buttonProps, ...moveUpButtonProps }" :pt="ptm('pcSourceMoveUpButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="moveupicon">
-                        <AngleUpIcon v-bind="ptm('sourceMoveUpButton')['icon']" data-pc-section="moveupicon" />
+                        <AngleUpIcon v-bind="ptm('pcSourceMoveUpButton')['icon']" data-pc-section="moveupicon" />
                     </slot>
                 </template>
             </Button>
-            <Button :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" @click="moveTop($event, 0)" v-bind="{ ...buttonProps, ...moveTopButtonProps }" :pt="ptm('sourceMoveTopButton')" :unstyled="unstyled">
+            <Button :aria-label="moveTopAriaLabel" :disabled="moveDisabled(0)" @click="moveTop($event, 0)" v-bind="{ ...buttonProps, ...moveTopButtonProps }" :pt="ptm('pcSourceMoveTopButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movetopicon">
-                        <AngleDoubleUpIcon v-bind="ptm('sourceMoveTopButton')['icon']" data-pc-section="movetopicon" />
+                        <AngleDoubleUpIcon v-bind="ptm('pcSourceMoveTopButton')['icon']" data-pc-section="movetopicon" />
                     </slot>
                 </template>
             </Button>
-            <Button :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" @click="moveDown($event, 0)" v-bind="{ ...buttonProps, ...moveDownButtonProps }" :pt="ptm('sourceMoveDownButton')" :unstyled="unstyled">
+            <Button :aria-label="moveDownAriaLabel" :disabled="moveDisabled(0)" @click="moveDown($event, 0)" v-bind="{ ...buttonProps, ...moveDownButtonProps }" :pt="ptm('pcSourceMoveDownButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movedownicon">
-                        <AngleDownIcon v-bind="ptm('sourceMoveDownButton')['icon']" data-pc-section="movedownicon" />
+                        <AngleDownIcon v-bind="ptm('pcSourceMoveDownButton')['icon']" data-pc-section="movedownicon" />
                     </slot>
                 </template>
             </Button>
-            <Button :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(0)" @click="moveBottom($event, 0)" v-bind="{ ...buttonProps, ...moveBottomButtonProps }" :pt="ptm('sourceMoveBottomButton')" :unstyled="unstyled">
+            <Button :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(0)" @click="moveBottom($event, 0)" v-bind="{ ...buttonProps, ...moveBottomButtonProps }" :pt="ptm('pcSourceMoveBottomButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movebottomicon">
-                        <AngleDoubleDownIcon v-bind="ptm('sourceMoveBottomButton')['icon']" data-pc-section="movebottomicon" />
+                        <AngleDoubleDownIcon v-bind="ptm('pcSourceMoveBottomButton')['icon']" data-pc-section="movebottomicon" />
                     </slot>
                 </template>
             </Button>
@@ -48,7 +48,7 @@
                 :focusOnHover="focusOnHover"
                 :stripedRows="stripedRows"
                 :disabled="disabled"
-                :pt="ptm('list')"
+                :pt="ptm('pcList')"
                 :unstyled="unstyled"
                 @focus="onListFocus($event, 'sourceList')"
                 @blur="onListBlur($event, 'sourceList')"
@@ -112,7 +112,7 @@
                 :focusOnHover="focusOnHover"
                 :stripedRows="stripedRows"
                 :disabled="disabled"
-                :pt="ptm('list')"
+                :pt="ptm('pcList')"
                 :unstyled="unstyled"
                 @focus="onListFocus($event, 'targetList')"
                 @blur="onListBlur($event, 'targetList')"
@@ -130,31 +130,31 @@
         </div>
         <div v-if="showTargetControls" :class="cx('targetControls')" v-bind="ptm('targetControls')" data-pc-group-section="controls">
             <slot name="targetcontrolsstart"></slot>
-            <Button :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" @click="moveUp($event, 1)" v-bind="{ ...buttonProps, ...moveUpButtonProps }" :pt="ptm('targetMoveUpButton')" :unstyled="unstyled">
+            <Button :aria-label="moveUpAriaLabel" :disabled="moveDisabled(1)" @click="moveUp($event, 1)" v-bind="{ ...buttonProps, ...moveUpButtonProps }" :pt="ptm('pcTargetMoveUpButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="moveupicon">
-                        <AngleUpIcon v-bind="ptm('targetMoveUpButton')['icon']" data-pc-section="moveupicon" />
+                        <AngleUpIcon v-bind="ptm('pcTargetMoveUpButton')['icon']" data-pc-section="moveupicon" />
                     </slot>
                 </template>
             </Button>
-            <Button :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" @click="moveTop($event, 1)" v-bind="{ ...buttonProps, ...moveTopButtonProps }" :pt="ptm('targetMoveTopButton')" :unstyled="unstyled">
+            <Button :aria-label="moveTopAriaLabel" :disabled="moveDisabled(1)" @click="moveTop($event, 1)" v-bind="{ ...buttonProps, ...moveTopButtonProps }" :pt="ptm('pcTargetMoveTopButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movetopicon">
-                        <AngleDoubleUpIcon v-bind="ptm('targetMoveTopButton')['icon']" data-pc-section="movetopicon" />
+                        <AngleDoubleUpIcon v-bind="ptm('pcTargetMoveTopButton')['icon']" data-pc-section="movetopicon" />
                     </slot>
                 </template>
             </Button>
-            <Button :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" @click="moveDown($event, 1)" v-bind="{ ...buttonProps, ...moveDownButtonProps }" :pt="ptm('targetMoveDownButton')" :unstyled="unstyled">
+            <Button :aria-label="moveDownAriaLabel" :disabled="moveDisabled(1)" @click="moveDown($event, 1)" v-bind="{ ...buttonProps, ...moveDownButtonProps }" :pt="ptm('pcTargetMoveDownButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movedownicon">
-                        <AngleDownIcon v-bind="ptm('targetMoveDownButton')['icon']" data-pc-section="movedownicon" />
+                        <AngleDownIcon v-bind="ptm('pcTargetMoveDownButton')['icon']" data-pc-section="movedownicon" />
                     </slot>
                 </template>
             </Button>
-            <Button :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(1)" @click="moveBottom($event, 1)" v-bind="{ ...buttonProps, ...moveBottomButtonProps }" :pt="ptm('targetMoveBottomButton')" :unstyled="unstyled">
+            <Button :aria-label="moveBottomAriaLabel" :disabled="moveDisabled(1)" @click="moveBottom($event, 1)" v-bind="{ ...buttonProps, ...moveBottomButtonProps }" :pt="ptm('pcTargetMoveBottomButton')" :unstyled="unstyled">
                 <template #icon>
                     <slot name="movebottomicon">
-                        <AngleDoubleDownIcon v-bind="ptm('targetMoveBottomButton')['icon']" data-pc-section="movebottomicon" />
+                        <AngleDoubleDownIcon v-bind="ptm('pcTargetMoveBottomButton')['icon']" data-pc-section="movebottomicon" />
                     </slot>
                 </template>
             </Button>
@@ -635,6 +635,7 @@ export default {
     },
     components: {
         Listbox,
+        Button,
         AngleRightIcon,
         AngleLeftIcon,
         AngleDownIcon,
diff --git a/components/lib/select/Select.d.ts b/components/lib/select/Select.d.ts
index e91effbd1..48caef503 100755
--- a/components/lib/select/Select.d.ts
+++ b/components/lib/select/Select.d.ts
@@ -115,9 +115,9 @@ export interface SelectPassThroughOptions<T = any> {
      */
     filterContainer?: SelectPassThroughOptionType<T>;
     /**
-     * Used to pass attributes to the filter's DOM element.
+     * Used to pass attributes to the InputText component.
      */
-    filter?: SelectPassThroughOptionType<T>;
+    pcFilter?: SelectPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the filter icon's DOM element.
      */
diff --git a/components/lib/select/Select.vue b/components/lib/select/Select.vue
index f5ca1f449..98c07ee45 100755
--- a/components/lib/select/Select.vue
+++ b/components/lib/select/Select.vue
@@ -83,7 +83,7 @@
                                 :value="filterValue"
                                 @vue:mounted="onFilterUpdated"
                                 @vue:updated="onFilterUpdated"
-                                :class="cx('filter')"
+                                :class="cx('pcFilter')"
                                 :placeholder="filterPlaceholder"
                                 :invalid="invalid"
                                 :variant="variant"
@@ -95,7 +95,7 @@
                                 @keydown="onFilterKeyDown"
                                 @blur="onFilterBlur"
                                 @input="onFilterChange"
-                                :pt="ptm('filter')"
+                                :pt="ptm('pcFilter')"
                             />
                             <slot name="filtericon" :class="cx('filterIcon')">
                                 <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
diff --git a/components/lib/select/style/SelectStyle.js b/components/lib/select/style/SelectStyle.js
index 5315e4360..7c32c8dcb 100644
--- a/components/lib/select/style/SelectStyle.js
+++ b/components/lib/select/style/SelectStyle.js
@@ -246,7 +246,7 @@ const classes = {
     ],
     header: 'p-select-header',
     filterContainer: 'p-select-filter-container',
-    filter: 'p-select-filter',
+    pcFilter: 'p-select-filter',
     filterIcon: 'p-select-filter-icon',
     listContainer: 'p-select-list-container',
     list: 'p-select-list',
diff --git a/components/lib/selectbutton/SelectButton.d.ts b/components/lib/selectbutton/SelectButton.d.ts
index d5358468a..7dbd2e0e5 100755
--- a/components/lib/selectbutton/SelectButton.d.ts
+++ b/components/lib/selectbutton/SelectButton.d.ts
@@ -58,6 +58,10 @@ export interface SelectButtonPassThroughOptions {
      * Used to pass attributes to the root's DOM element.
      */
     root?: SelectButtonPassThroughOptionType;
+    /**
+     * Used to pass attributes to the ToggleButton component.
+     */
+    pcButton?: SelectButtonPassThroughOptionType;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
diff --git a/components/lib/selectbutton/SelectButton.vue b/components/lib/selectbutton/SelectButton.vue
index f50dc8053..1e468e4e5 100755
--- a/components/lib/selectbutton/SelectButton.vue
+++ b/components/lib/selectbutton/SelectButton.vue
@@ -8,11 +8,11 @@
                 :disabled="disabled || isOptionDisabled(option)"
                 :unstyled="unstyled"
                 @change="onOptionSelect($event, option, index)"
-                :pt="ptm('button')"
+                :pt="ptm('pcButton')"
             >
                 <template v-if="$slots.option" #default>
                     <slot name="option" :option="option" :index="index">
-                        <span v-bind="ptm('button')['label']">{{ getOptionLabel(option) }}</span>
+                        <span v-bind="ptm('pcButton')['label']">{{ getOptionLabel(option) }}</span>
                     </slot>
                 </template>
             </ToggleButton>
diff --git a/components/lib/speeddial/SpeedDial.d.ts b/components/lib/speeddial/SpeedDial.d.ts
index 1eb63d9c6..358e5a06b 100644
--- a/components/lib/speeddial/SpeedDial.d.ts
+++ b/components/lib/speeddial/SpeedDial.d.ts
@@ -77,7 +77,7 @@ export interface SpeedDialPassThroughOptions {
      * Used to pass attributes to the Button component.
      *  @see {@link ButtonPassThroughOptions}
      */
-    button?: ButtonPassThroughOptions<SpeedDialSharedPassThroughMethodOptions>;
+    pcButton?: ButtonPassThroughOptions<SpeedDialSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the list's DOM element.
      */
diff --git a/components/lib/speeddial/SpeedDial.vue b/components/lib/speeddial/SpeedDial.vue
index f667519e0..f1fd1db53 100644
--- a/components/lib/speeddial/SpeedDial.vue
+++ b/components/lib/speeddial/SpeedDial.vue
@@ -2,7 +2,7 @@
     <div :ref="containerRef" :class="containerClass" :style="[style, sx('root')]" v-bind="ptmi('root')">
         <slot name="button" :visible="d_visible" :onClick="onClick" :toggleCallback="onClick">
             <Button
-                :class="[cx('button'), buttonClass]"
+                :class="[cx('pcButton'), buttonClass]"
                 :disabled="disabled"
                 :aria-expanded="d_visible"
                 :aria-haspopup="true"
@@ -13,12 +13,12 @@
                 @click="onClick($event)"
                 @keydown="onTogglerKeydown"
                 v-bind="buttonProps"
-                :pt="ptm('button')"
+                :pt="ptm('pcButton')"
             >
                 <template #icon="slotProps">
                     <slot name="icon" :visible="d_visible">
-                        <component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="[hideIcon, cx('buttonIcon'), slotProps.class]" v-bind="ptm('button')['icon']" data-pc-section="icon" />
-                        <component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="[d_visible && !!hideIcon ? hideIcon : showIcon, slotProps.class]" v-bind="ptm('button')['icon']" data-pc-section="icon" />
+                        <component v-if="d_visible && !!hideIcon" :is="hideIcon ? 'span' : 'PlusIcon'" :class="[hideIcon, slotProps.class]" v-bind="ptm('pcButton')['icon']" data-pc-section="icon" />
+                        <component v-else :is="showIcon ? 'span' : 'PlusIcon'" :class="[d_visible && !!hideIcon ? hideIcon : showIcon, slotProps.class]" v-bind="ptm('pcButton')['icon']" data-pc-section="icon" />
                     </slot>
                 </template>
             </Button>
@@ -40,16 +40,16 @@
                             v-tooltip:[tooltipOptions]="{ value: item.label, disabled: !tooltipOptions }"
                             :tabindex="-1"
                             role="menuitem"
-                            :class="cx('action', { item })"
+                            :class="cx('pcAction', { item })"
                             :aria-label="item.label"
                             :disabled="disabled"
                             :unstyled="unstyled"
                             @click="onItemClick($event, item)"
                             v-bind="actionButtonProps"
-                            :pt="getPTOptions(`${id}_${index}`, 'action')"
+                            :pt="getPTOptions(`${id}_${index}`, 'pcAction')"
                         >
                             <template v-if="item.icon" #icon="slotProps">
-                                <span :class="[cx('actionIcon'), item.icon, slotProps.class]" v-bind="getPTOptions(`${id}_${index}`, 'actionIcon')"></span>
+                                <span :class="[item.icon, slotProps.class]" v-bind="getPTOptions(`${id}_${index}`, 'actionIcon')"></span>
                             </template>
                         </Button>
                     </template>
diff --git a/components/lib/speeddial/style/SpeedDialStyle.js b/components/lib/speeddial/style/SpeedDialStyle.js
index dd595b67e..431ff546d 100644
--- a/components/lib/speeddial/style/SpeedDialStyle.js
+++ b/components/lib/speeddial/style/SpeedDialStyle.js
@@ -99,7 +99,7 @@ const classes = {
             'p-disabled': props.disabled
         }
     ],
-    button: ({ props }) => [
+    pcButton: ({ props }) => [
         'p-speeddial-button',
         {
             'p-speeddial-rotate': props.rotateAnimation && !props.hideIcon
diff --git a/components/lib/splitbutton/SplitButton.d.ts b/components/lib/splitbutton/SplitButton.d.ts
index e4adc2bab..0581f7025 100755
--- a/components/lib/splitbutton/SplitButton.d.ts
+++ b/components/lib/splitbutton/SplitButton.d.ts
@@ -71,19 +71,20 @@ export interface SplitButtonPassThroughOptions {
      */
     root?: SplitButtonPassThroughOptionType;
     /**
-     * Used to pass attributes to the button's DOM element.
+     * Used to pass attributes to the Button component.
+     * @see {@link ButtonPassThroughOptions}
      */
-    button?: SplitButtonPassThroughOptionType;
+    pcButton?: ButtonPassThroughOptions<SplitButtonSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the Button component.
      * @see {@link ButtonPassThroughOptions}
      */
-    dropdown?: ButtonPassThroughOptions<SplitButtonSharedPassThroughMethodOptions>;
+    pcDropdown?: ButtonPassThroughOptions<SplitButtonSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the TieredMenu component.
      * @see {@link TieredMenuPassThroughOptions}
      */
-    menu?: TieredMenuPassThroughOptions<SplitButtonSharedPassThroughMethodOptions>;
+    ptMenu?: TieredMenuPassThroughOptions<SplitButtonSharedPassThroughMethodOptions>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
diff --git a/components/lib/splitbutton/SplitButton.vue b/components/lib/splitbutton/SplitButton.vue
index 75ea77e76..9d0f07898 100755
--- a/components/lib/splitbutton/SplitButton.vue
+++ b/components/lib/splitbutton/SplitButton.vue
@@ -2,7 +2,7 @@
     <div :class="containerClass" :style="style" v-bind="ptmi('root')" :data-p-severity="severity">
         <PVSButton
             type="button"
-            :class="cx('button')"
+            :class="cx('pcButton')"
             :label="label"
             :disabled="disabled"
             :severity="severity"
@@ -12,12 +12,12 @@
             :aria-label="label"
             @click="onDefaultButtonClick"
             v-bind="buttonProps"
-            :pt="ptm('button')"
+            :pt="ptm('pcButton')"
             :unstyled="unstyled"
         >
             <template v-if="$slots.icon" #icon="slotProps">
                 <slot name="icon" :class="slotProps.class">
-                    <span :class="[icon, slotProps.class]" v-bind="ptm('button')['icon']" data-pc-section="buttonicon" />
+                    <span :class="[icon, slotProps.class]" v-bind="ptm('pcButton')['icon']" data-pc-section="buttonicon" />
                 </slot>
             </template>
             <template #default>
@@ -27,7 +27,7 @@
         <PVSButton
             ref="button"
             type="button"
-            :class="cx('dropdown')"
+            :class="cx('pcDropdown')"
             :disabled="disabled"
             aria-haspopup="true"
             :aria-expanded="isExpanded"
@@ -40,16 +40,16 @@
             :size="size"
             :unstyled="unstyled"
             v-bind="menuButtonProps"
-            :pt="ptm('dropdown')"
+            :pt="ptm('pcDropdown')"
         >
             <template #icon="slotProps">
                 <!--TODO: menubuttonicon and menuButtonIcon deprecated since v4.0-->
                 <slot :name="$slots.dropdownicon ? 'dropdownicon' : 'menubuttonicon'" :class="slotProps.class">
-                    <component :is="menuButtonIcon || dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="[dropdownIcon || menuButtonIcon, slotProps.class]" v-bind="ptm('dropdown')['icon']" data-pc-section="menubuttonicon" />
+                    <component :is="menuButtonIcon || dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="[dropdownIcon || menuButtonIcon, slotProps.class]" v-bind="ptm('pcDropdown')['icon']" data-pc-section="menubuttonicon" />
                 </slot>
             </template>
         </PVSButton>
-        <PVSMenu ref="menu" :id="id + '_overlay'" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :appendTo="appendTo" :unstyled="unstyled" :pt="ptm('menu')">
+        <PVSMenu ref="menu" :id="id + '_overlay'" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :appendTo="appendTo" :unstyled="unstyled" :pt="ptm('ptMenu')">
             <template v-if="$slots.menuitemicon" #itemicon="slotProps">
                 <slot name="menuitemicon" :item="slotProps.item" :class="slotProps.class" />
             </template>
diff --git a/components/lib/splitbutton/style/SplitButtonStyle.js b/components/lib/splitbutton/style/SplitButtonStyle.js
index 6702910e6..d373d8b1a 100644
--- a/components/lib/splitbutton/style/SplitButtonStyle.js
+++ b/components/lib/splitbutton/style/SplitButtonStyle.js
@@ -70,8 +70,8 @@ const theme = ({ dt }) => `
 
 const classes = {
     root: 'p-splitbutton p-component',
-    button: 'p-splitbutton-button',
-    dropdown: 'p-splitbutton-dropdown'
+    pcButton: 'p-splitbutton-button',
+    pcDropdown: 'p-splitbutton-dropdown'
 };
 
 export default BaseStyle.extend({
diff --git a/components/lib/tree/Tree.d.ts b/components/lib/tree/Tree.d.ts
index 94f10f31f..c4e734f50 100755
--- a/components/lib/tree/Tree.d.ts
+++ b/components/lib/tree/Tree.d.ts
@@ -112,7 +112,7 @@ export interface TreePassThroughOptions<T = any> {
      * Used to pass attributes to the input's DOM element.
      * @see {@link InputTextPassThroughOptions}
      */
-    filterInput?: InputTextPassThroughOptions<TreeSharedPassThroughMethodOptions>;
+    pcFilterInput?: InputTextPassThroughOptions<TreeSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the filter icon's DOM element.
      */
diff --git a/components/lib/tree/Tree.vue b/components/lib/tree/Tree.vue
index 2ec9868fd..bc16033fc 100755
--- a/components/lib/tree/Tree.vue
+++ b/components/lib/tree/Tree.vue
@@ -9,7 +9,7 @@
             </div>
         </template>
         <div v-if="filter" :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
-            <InputText v-model="filterValue" autocomplete="off" :class="cx('filterInput')" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" v-bind="ptm('filterInput')" />
+            <InputText v-model="filterValue" autocomplete="off" :class="cx('pcFilterInput')" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" v-bind="ptm('pcFilterInput')" />
             <!--TODO: searchicon deprecated since v4.0-->
             <slot :name="$slots.filtericon ? 'filtericon' : 'searchicon'" :class="cx('filterIcon')">
                 <SearchIcon :class="cx('filterIcon')" v-bind="ptm('filterIcon')" />
diff --git a/components/lib/tree/style/TreeStyle.js b/components/lib/tree/style/TreeStyle.js
index 10e4cf450..f54d8c12d 100644
--- a/components/lib/tree/style/TreeStyle.js
+++ b/components/lib/tree/style/TreeStyle.js
@@ -191,7 +191,7 @@ const classes = {
     mask: 'p-tree-mask p-component-overlay',
     loadingIcon: 'p-tree-loading-icon',
     filterContainer: 'p-tree-filter-container',
-    filterInput: 'p-tree-filter-input',
+    pcFilterInput: 'p-tree-filter-input',
     filterIcon: 'p-tree-filter-icon',
     wrapper: 'p-tree-root', //TODO: discuss
     rootChildren: 'p-tree-root-children',
diff --git a/components/lib/treeselect/TreeSelect.d.ts b/components/lib/treeselect/TreeSelect.d.ts
index 66f413390..26feac287 100644
--- a/components/lib/treeselect/TreeSelect.d.ts
+++ b/components/lib/treeselect/TreeSelect.d.ts
@@ -88,7 +88,7 @@ export interface TreeSelectPassThroughOptions {
      * Used to pass attributes to the Chip.
      * @see {@link ChipPassThroughOptions}
      */
-    chipLabel?: ChipPassThroughOptions<TreeSelectSharedPassThroughMethodOptions>;
+    pcChipLabel?: ChipPassThroughOptions<TreeSelectSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the dropdown's DOM element.
      */
@@ -109,7 +109,7 @@ export interface TreeSelectPassThroughOptions {
      * Used to pass attributes to Tree component.
      * @see {@link TreePassThroughOptions}
      */
-    tree?: TreePassThroughOptions<TreeSelectSharedPassThroughMethodOptions>;
+    pcTree?: TreePassThroughOptions<TreeSelectSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the empty message's DOM element.
      */
diff --git a/components/lib/treeselect/TreeSelect.vue b/components/lib/treeselect/TreeSelect.vue
index 463fe59c1..702fc4b52 100644
--- a/components/lib/treeselect/TreeSelect.vue
+++ b/components/lib/treeselect/TreeSelect.vue
@@ -30,7 +30,7 @@
                     </template>
                     <template v-else-if="display === 'chip'">
                         <div v-for="node of selectedNodes" :key="node.key" :class="cx('chip')" v-bind="ptm('chip')">
-                            <Chip :class="cx('chipLabel')" :label="node.label" :unstyled="unstyled" :pt="ptm('chipLabel')" />
+                            <Chip :class="cx('pcChipLabel')" :label="node.label" :unstyled="unstyled" :pt="ptm('pcChipLabel')" />
                         </div>
                         <template v-if="emptyValue">{{ placeholder || 'empty' }}</template>
                     </template>
@@ -75,7 +75,7 @@
                             @node-unselect="onNodeUnselect"
                             :level="0"
                             :unstyled="unstyled"
-                            :pt="ptm('tree')"
+                            :pt="ptm('pcTree')"
                         >
                             <template v-if="$slots.itemtogglericon" #togglericon="iconProps">
                                 <slot name="itemtogglericon" :node="iconProps.node" :expanded="iconProps.expanded" :class="iconProps.class" />
diff --git a/components/lib/treeselect/style/TreeSelectStyle.js b/components/lib/treeselect/style/TreeSelectStyle.js
index 26f36176f..b7682fe86 100644
--- a/components/lib/treeselect/style/TreeSelectStyle.js
+++ b/components/lib/treeselect/style/TreeSelectStyle.js
@@ -141,7 +141,7 @@ const classes = {
         }
     ],
     chip: 'p-treeselect-chip',
-    chipLabel: 'p-treeselect-chip-label',
+    pcChipLabel: 'p-treeselect-chip-label',
     dropdown: 'p-treeselect-dropdown',
     dropdownIcon: 'p-treeselect-dropdown-icon',
     panel: ({ instance }) => [
diff --git a/components/lib/treetable/BodyCell.vue b/components/lib/treetable/BodyCell.vue
index 5602f8f86..fa3b4b1ea 100644
--- a/components/lib/treetable/BodyCell.vue
+++ b/components/lib/treetable/BodyCell.vue
@@ -19,12 +19,12 @@
             v-if="checkboxSelectionMode && columnProp('expander')"
             :modelValue="checked"
             :binary="true"
-            :class="cx('nodeCheckbox')"
+            :class="cx('pcNodeCheckbox')"
             @change="toggleCheckbox"
             :tabindex="-1"
             :indeterminate="partialChecked"
             :unstyled="unstyled"
-            :pt="getColumnCheckboxPT('nodeCheckbox')"
+            :pt="getColumnCheckboxPT('pcNodeCheckbox')"
             :data-p-partialchecked="partialChecked"
         >
             <template #icon="slotProps">
diff --git a/components/lib/treetable/TreeTable.d.ts b/components/lib/treetable/TreeTable.d.ts
index 30759c657..ae44a2ab7 100755
--- a/components/lib/treetable/TreeTable.d.ts
+++ b/components/lib/treetable/TreeTable.d.ts
@@ -236,7 +236,7 @@ export interface TreeTablePassThroughOptions {
      * Used to pass attributes to the Paginator component.
      * @see {@link PaginatorPassThroughOptionType}
      */
-    paginator?: PaginatorPassThroughOptionType<TreeTableSharedPassThroughMethodOptions>;
+    pcPaginator?: PaginatorPassThroughOptionType<TreeTableSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the table container's DOM element.
      */
diff --git a/components/lib/treetable/TreeTable.vue b/components/lib/treetable/TreeTable.vue
index dc0a0b893..c92e5ad35 100755
--- a/components/lib/treetable/TreeTable.vue
+++ b/components/lib/treetable/TreeTable.vue
@@ -20,11 +20,11 @@
             :template="paginatorTemplate"
             :rowsPerPageOptions="rowsPerPageOptions"
             :currentPageReportTemplate="currentPageReportTemplate"
-            :class="cx('paginator', { position: 'top' })"
+            :class="cx('pcPaginator', { position: 'top' })"
             @page="onPage($event)"
             :alwaysShow="alwaysShowPaginator"
             :unstyled="unstyled"
-            :pt="ptm('paginator')"
+            :pt="ptm('pcPaginator')"
         >
             <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
@@ -129,11 +129,11 @@
             :template="paginatorTemplate"
             :rowsPerPageOptions="rowsPerPageOptions"
             :currentPageReportTemplate="currentPageReportTemplate"
-            :class="cx('paginator', { position: 'bottom' })"
+            :class="cx('pcPaginator', { position: 'bottom' })"
             @page="onPage($event)"
             :alwaysShow="alwaysShowPaginator"
             :unstyled="unstyled"
-            :pt="ptm('paginator')"
+            :pt="ptm('pcPaginator')"
         >
             <template v-if="$slots.paginatorstart" #start>
                 <slot name="paginatorstart"></slot>
diff --git a/components/lib/treetable/style/TreeTableStyle.js b/components/lib/treetable/style/TreeTableStyle.js
index 5411b6a13..4263ec0d2 100644
--- a/components/lib/treetable/style/TreeTableStyle.js
+++ b/components/lib/treetable/style/TreeTableStyle.js
@@ -505,7 +505,7 @@ const classes = {
     ],
     nodeToggleButton: 'p-treetable-node-toggle-button',
     nodeToggleIcon: 'p-treetable-node-toggle-icon',
-    nodeCheckbox: 'p-treetable-node-checkbox',
+    pcNodeCheckbox: 'p-treetable-node-checkbox',
     emptyMessage: 'p-treetable-empty-message',
     tfoot: 'p-treetable-tfoot',
     footerCell: ({ instance }) => [