From 40f5d1ac90d556785890d000bf4764c7aaafe2c4 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Fri, 24 May 2024 14:07:49 +0300
Subject: [PATCH] Naming convention for data-p-* attributes

---
 components/lib/autocomplete/AutoComplete.vue      |  2 +-
 components/lib/carousel/Carousel.vue              |  4 ++--
 components/lib/cascadeselect/CascadeSelectSub.vue |  2 +-
 components/lib/checkbox/Checkbox.vue              |  2 +-
 components/lib/contextmenu/ContextMenuSub.vue     |  2 +-
 components/lib/datatable/BodyRow.vue              |  4 ++--
 components/lib/datatable/DataTable.vue            |  2 +-
 components/lib/datatable/HeaderCell.vue           |  2 +-
 components/lib/datepicker/DatePicker.vue          | 12 ++++++------
 components/lib/galleria/GalleriaItem.vue          |  4 ++--
 components/lib/listbox/Listbox.vue                |  2 +-
 components/lib/megamenu/MegaMenuSub.vue           |  2 +-
 components/lib/menubar/MenubarSub.vue             |  2 +-
 components/lib/multiselect/MultiSelect.spec.js    |  6 +++---
 components/lib/multiselect/MultiSelect.vue        |  2 +-
 components/lib/orderlist/OrderList.vue            |  2 +-
 components/lib/paginator/PageLinks.vue            |  2 +-
 components/lib/panelmenu/PanelMenu.vue            |  6 +++---
 components/lib/picklist/PickList.vue              |  2 +-
 components/lib/radiobutton/RadioButton.vue        |  2 +-
 components/lib/select/Select.vue                  |  2 +-
 components/lib/stepper/Stepper.vue                |  6 ++----
 components/lib/steps/Steps.vue                    |  2 +-
 components/lib/tabmenu/TabMenu.vue                |  8 ++++----
 components/lib/tabview/TabView.vue                |  3 +--
 components/lib/tieredmenu/TieredMenuSub.vue       |  2 +-
 components/lib/togglebutton/ToggleButton.vue      |  2 +-
 components/lib/toggleswitch/ToggleSwitch.vue      |  2 +-
 components/lib/tree/TreeNode.vue                  |  2 +-
 components/lib/treeselect/TreeSelect.vue          |  2 +-
 components/lib/treetable/HeaderCell.vue           |  2 +-
 components/lib/treetable/TreeTableRow.vue         |  6 +++---
 32 files changed, 50 insertions(+), 53 deletions(-)

diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue
index a9f05f28d..3bf9b37a1 100755
--- a/components/lib/autocomplete/AutoComplete.vue
+++ b/components/lib/autocomplete/AutoComplete.vue
@@ -152,7 +152,7 @@
                                         :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
                                         @click="onOptionSelect($event, option)"
                                         @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
-                                        :data-p-highlight="isSelected(option)"
+                                        :data-p-selected="isSelected(option)"
                                         :data-p-focus="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
                                         :data-p-disabled="isOptionDisabled(option)"
                                         v-bind="getPTOptions(option, getItemOptions, i, 'option')"
diff --git a/components/lib/carousel/Carousel.vue b/components/lib/carousel/Carousel.vue
index 6d59821a1..c7cc02a55 100755
--- a/components/lib/carousel/Carousel.vue
+++ b/components/lib/carousel/Carousel.vue
@@ -78,7 +78,7 @@
                 </Button>
             </div>
             <ul v-if="totalIndicators >= 0 && showIndicators" ref="indicatorContent" :class="[cx('indicatorList'), indicatorsContentClass]" @keydown="onIndicatorKeydown" v-bind="ptm('indicatorList')">
-                <li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="cx('indicator', { index: i })" v-bind="ptm('indicator', getIndicatorPTOptions(i))" :data-p-highlight="d_page === i">
+                <li v-for="(indicator, i) of totalIndicators" :key="'p-carousel-indicator-' + i.toString()" :class="cx('indicator', { index: i })" v-bind="ptm('indicator', getIndicatorPTOptions(i))" :data-p-active="d_page === i">
                     <button
                         :class="cx('indicatorButton')"
                         type="button"
@@ -498,7 +498,7 @@ export default {
         },
         onTabKey() {
             const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
-            const highlightedIndex = indicators.findIndex((ind) => DomHandler.getAttribute(ind, 'data-p-highlight') === true);
+            const highlightedIndex = indicators.findIndex((ind) => DomHandler.getAttribute(ind, 'data-p-active') === true);
 
             const activeIndicator = DomHandler.findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > button[tabindex="0"]');
             const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement);
diff --git a/components/lib/cascadeselect/CascadeSelectSub.vue b/components/lib/cascadeselect/CascadeSelectSub.vue
index b48679ad9..f9b77416a 100644
--- a/components/lib/cascadeselect/CascadeSelectSub.vue
+++ b/components/lib/cascadeselect/CascadeSelectSub.vue
@@ -13,7 +13,7 @@
                 :aria-posinset="index + 1"
                 v-bind="getPTOptions(processedOption, index, 'option')"
                 :data-p-option-group="isOptionGroup(processedOption)"
-                :data-p-highlight="isOptionActive(processedOption)"
+                :data-p-active="isOptionActive(processedOption)"
                 :data-p-focus="isOptionFocused(processedOption)"
                 :data-p-disabled="isOptionDisabled(processedOption)"
             >
diff --git a/components/lib/checkbox/Checkbox.vue b/components/lib/checkbox/Checkbox.vue
index b68a9c8cb..bfe1fe4dc 100755
--- a/components/lib/checkbox/Checkbox.vue
+++ b/components/lib/checkbox/Checkbox.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-highlight="checked" :data-p-checked="checked" :data-p-indeterminate="d_indeterminate || undefined" :data-p-disabled="disabled">
+    <div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-checked="checked" :data-p-indeterminate="d_indeterminate || undefined" :data-p-disabled="disabled">
         <input
             :id="inputId"
             type="checkbox"
diff --git a/components/lib/contextmenu/ContextMenuSub.vue b/components/lib/contextmenu/ContextMenuSub.vue
index 8b6b8a4c8..5b3a23b39 100755
--- a/components/lib/contextmenu/ContextMenuSub.vue
+++ b/components/lib/contextmenu/ContextMenuSub.vue
@@ -16,7 +16,7 @@
                     :aria-setsize="getAriaSetSize()"
                     :aria-posinset="getAriaPosInset(index)"
                     v-bind="getPTOptions('item', processedItem, index)"
-                    :data-p-highlight="isItemActive(processedItem)"
+                    :data-p-active="isItemActive(processedItem)"
                     :data-p-focused="isItemFocused(processedItem)"
                     :data-p-disabled="isItemDisabled(processedItem)"
                 >
diff --git a/components/lib/datatable/BodyRow.vue b/components/lib/datatable/BodyRow.vue
index 2b415b7ff..e82e272a6 100644
--- a/components/lib/datatable/BodyRow.vue
+++ b/components/lib/datatable/BodyRow.vue
@@ -35,8 +35,8 @@
             v-bind="getBodyRowPTOptions('bodyRow')"
             :data-p-index="rowIndex"
             :data-p-selectable-row="selectionMode ? true : false"
-            :data-p-highlight="selection && isSelected"
-            :data-p-highlight-contextmenu="contextMenuSelection && isSelectedWithContextMenu"
+            :data-p-selected="selection && isSelected"
+            :data-p-selected-contextmenu="contextMenuSelection && isSelectedWithContextMenu"
         >
             <template v-for="(col, i) of columns">
                 <DTBodyCell
diff --git a/components/lib/datatable/DataTable.vue b/components/lib/datatable/DataTable.vue
index f93363a29..a88dffa08 100755
--- a/components/lib/datatable/DataTable.vue
+++ b/components/lib/datatable/DataTable.vue
@@ -959,7 +959,7 @@ export default {
             const rows = DomHandler.find(body, 'tr[data-p-selectable-row="true"]');
 
             if (event.code === 'Tab' && rows && rows.length > 0) {
-                const firstSelectedRow = DomHandler.findSingle(body, 'tr[data-p-highlight="true"]');
+                const firstSelectedRow = DomHandler.findSingle(body, 'tr[data-p-selected="true"]');
                 const focusedItem = DomHandler.findSingle(body, 'tr[data-p-selectable-row="true"][tabindex="0"]');
 
                 if (firstSelectedRow) {
diff --git a/components/lib/datatable/HeaderCell.vue b/components/lib/datatable/HeaderCell.vue
index 72e58915b..2e87b3917 100644
--- a/components/lib/datatable/HeaderCell.vue
+++ b/components/lib/datatable/HeaderCell.vue
@@ -17,7 +17,7 @@
         v-bind="{ ...getColumnPT('root'), ...getColumnPT('headerCell') }"
         :data-p-sortable-column="columnProp('sortable')"
         :data-p-resizable-column="resizableColumns"
-        :data-p-highlight="isColumnSorted()"
+        :data-p-sorted="isColumnSorted()"
         :data-p-filter-column="filterColumn"
         :data-p-frozen-column="columnProp('frozen')"
         :data-p-reorderable-column="reorderableColumns"
diff --git a/components/lib/datepicker/DatePicker.vue b/components/lib/datepicker/DatePicker.vue
index 150a1bcc5..9d8e875fb 100755
--- a/components/lib/datepicker/DatePicker.vue
+++ b/components/lib/datepicker/DatePicker.vue
@@ -240,7 +240,7 @@
                                                         })
                                                     "
                                                     :data-p-disabled="!date.selectable"
-                                                    :data-p-highlight="isSelected(date)"
+                                                    :data-p-selected="isSelected(date)"
                                                     data-pc-group-section="tablebodycelllabel"
                                                 >
                                                     <slot name="date" :date="date">{{ date.day }}</slot>
@@ -273,7 +273,7 @@
                                     })
                                 "
                                 :data-p-disabled="!m.selectable"
-                                :data-p-highlight="isMonthSelected(i)"
+                                :data-p-selected="isMonthSelected(i)"
                             >
                                 {{ m.value }}
                                 <div v-if="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenMonth')" :data-p-hidden-accessible="true">
@@ -299,7 +299,7 @@
                                     })
                                 "
                                 :data-p-disabled="!y.selectable"
-                                :data-p-highlight="isYearSelected(y.value)"
+                                :data-p-selected="isYearSelected(y.value)"
                             >
                                 {{ y.value }}
                                 <div v-if="isYearSelected(y.value)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenYear')" :data-p-hidden-accessible="true">
@@ -2487,18 +2487,18 @@ export default {
 
             if (this.currentView === 'month') {
                 let cells = DomHandler.find(this.overlay, '[data-pc-section="monthview"] [data-pc-section="month"]');
-                let selectedCell = DomHandler.findSingle(this.overlay, '[data-pc-section="monthview"] [data-pc-section="month"][data-p-highlight="true"]');
+                let selectedCell = DomHandler.findSingle(this.overlay, '[data-pc-section="monthview"] [data-pc-section="month"][data-p-selected="true"]');
 
                 cells.forEach((cell) => (cell.tabIndex = -1));
                 cell = selectedCell || cells[0];
             } else if (this.currentView === 'year') {
                 let cells = DomHandler.find(this.overlay, '[data-pc-section="yearview"] [data-pc-section="year"]');
-                let selectedCell = DomHandler.findSingle(this.overlay, '[data-pc-section="yearview"] [data-pc-section="year"][data-p-highlight="true"]');
+                let selectedCell = DomHandler.findSingle(this.overlay, '[data-pc-section="yearview"] [data-pc-section="year"][data-p-selected="true"]');
 
                 cells.forEach((cell) => (cell.tabIndex = -1));
                 cell = selectedCell || cells[0];
             } else {
-                cell = DomHandler.findSingle(this.overlay, 'span[data-p-highlight="true"]');
+                cell = DomHandler.findSingle(this.overlay, 'span[data-p-selected="true"]');
 
                 if (!cell) {
                     let todayCell = DomHandler.findSingle(this.overlay, 'td.p-datepicker-today span:not([data-p-disabled="true"]):not([data-p-ink="true"])');
diff --git a/components/lib/galleria/GalleriaItem.vue b/components/lib/galleria/GalleriaItem.vue
index b41634010..ac27a59e0 100755
--- a/components/lib/galleria/GalleriaItem.vue
+++ b/components/lib/galleria/GalleriaItem.vue
@@ -26,7 +26,7 @@
                 @mouseenter="onIndicatorMouseEnter(index)"
                 @keydown="onIndicatorKeyDown($event, index)"
                 v-bind="ptm('indicator', getIndicatorPTOptions(index))"
-                :data-p-highlight="isIndicatorItemActive(index)"
+                :data-p-active="isIndicatorItemActive(index)"
             >
                 <button v-if="!templates['indicator']" type="button" :tabindex="activeIndex === index ? '0' : '-1'" :class="cx('indicatorButton')" v-bind="ptm('indicatorButton', getIndicatorPTOptions(index))"></button>
                 <component v-if="templates.indicator" :is="templates.indicator" :index="index" />
@@ -214,7 +214,7 @@ export default {
         },
         onTabKey() {
             const indicators = [...DomHandler.find(this.$refs.indicatorContent, '[data-pc-section="indicator"]')];
-            const highlightedIndex = indicators.findIndex((ind) => DomHandler.getAttribute(ind, 'data-p-highlight') === true);
+            const highlightedIndex = indicators.findIndex((ind) => DomHandler.getAttribute(ind, 'data-p-active') === true);
 
             const activeIndicator = DomHandler.findSingle(this.$refs.indicatorContent, '[data-pc-section="indicator"] > button[tabindex="0"]');
             const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement);
diff --git a/components/lib/listbox/Listbox.vue b/components/lib/listbox/Listbox.vue
index 73bc4882d..a9f238003 100755
--- a/components/lib/listbox/Listbox.vue
+++ b/components/lib/listbox/Listbox.vue
@@ -87,7 +87,7 @@
                                 @touchend="onOptionTouchEnd()"
                                 @dblclick="onOptionDblClick($event, option)"
                                 v-bind="getPTOptions(option, getItemOptions, i, 'option')"
-                                :data-p-highlight="isSelected(option)"
+                                :data-p-selected="isSelected(option)"
                                 :data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
                                 :data-p-disabled="isOptionDisabled(option)"
                             >
diff --git a/components/lib/megamenu/MegaMenuSub.vue b/components/lib/megamenu/MegaMenuSub.vue
index e76c83f04..52e318de3 100644
--- a/components/lib/megamenu/MegaMenuSub.vue
+++ b/components/lib/megamenu/MegaMenuSub.vue
@@ -16,7 +16,7 @@
                 :aria-setsize="getAriaSetSize()"
                 :aria-posinset="getAriaPosInset(index)"
                 v-bind="getPTOptions(processedItem, index, 'item')"
-                :data-p-highlight="isItemActive(processedItem)"
+                :data-p-active="isItemActive(processedItem)"
                 :data-p-focused="isItemFocused(processedItem)"
                 :data-p-disabled="isItemDisabled(processedItem)"
             >
diff --git a/components/lib/menubar/MenubarSub.vue b/components/lib/menubar/MenubarSub.vue
index 5067e1de9..5fce7fddc 100755
--- a/components/lib/menubar/MenubarSub.vue
+++ b/components/lib/menubar/MenubarSub.vue
@@ -15,7 +15,7 @@
                 :aria-setsize="getAriaSetSize()"
                 :aria-posinset="getAriaPosInset(index)"
                 v-bind="getPTOptions(processedItem, index, 'item')"
-                :data-p-highlight="isItemActive(processedItem)"
+                :data-p-active="isItemActive(processedItem)"
                 :data-p-focused="isItemFocused(processedItem)"
                 :data-p-disabled="isItemDisabled(processedItem)"
             >
diff --git a/components/lib/multiselect/MultiSelect.spec.js b/components/lib/multiselect/MultiSelect.spec.js
index 4cd9099d2..185a046fe 100644
--- a/components/lib/multiselect/MultiSelect.spec.js
+++ b/components/lib/multiselect/MultiSelect.spec.js
@@ -49,7 +49,7 @@ describe('MultiSelect.vue', () => {
         await wrapper.setProps({ modelValue: [wrapper.vm.options[0]] });
         await wrapper.vm.onContainerClick();
 
-        expect(wrapper.findAll('li.p-multiselect-item')[0].attributes()['data-p-highlight']).toBe('true');
+        expect(wrapper.findAll('li.p-multiselect-item')[0].attributes()['data-p-selected']).toBe('true');
         expect(wrapper.find('.p-multiselect-label').text()).toBe('New York');
     });
 
@@ -63,8 +63,8 @@ describe('MultiSelect.vue', () => {
         await wrapper.setProps({ modelValue: [wrapper.vm.options[0], wrapper.vm.options[1]] });
         await wrapper.vm.onContainerClick();
 
-        expect(wrapper.findAll('li.p-multiselect-item')[0].attributes()['data-p-highlight']).toBe('true');
-        expect(wrapper.findAll('li.p-multiselect-item')[1].attributes()['data-p-highlight']).toBe('true');
+        expect(wrapper.findAll('li.p-multiselect-item')[0].attributes()['data-p-selected']).toBe('true');
+        expect(wrapper.findAll('li.p-multiselect-item')[1].attributes()['data-p-selected']).toBe('true');
     });
 
     it('should close panel', async () => {
diff --git a/components/lib/multiselect/MultiSelect.vue b/components/lib/multiselect/MultiSelect.vue
index 863d36d82..7d38426d0 100755
--- a/components/lib/multiselect/MultiSelect.vue
+++ b/components/lib/multiselect/MultiSelect.vue
@@ -148,7 +148,7 @@
                                             @click="onOptionSelect($event, option, getOptionIndex(i, getItemOptions), true)"
                                             @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
                                             v-bind="getCheckboxPTOptions(option, getItemOptions, i, 'option')"
-                                            :data-p-highlight="isSelected(option)"
+                                            :data-p-selected="isSelected(option)"
                                             :data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
                                             :data-p-disabled="isOptionDisabled(option)"
                                         >
diff --git a/components/lib/orderlist/OrderList.vue b/components/lib/orderlist/OrderList.vue
index 38b9d826b..ca0eff97b 100755
--- a/components/lib/orderlist/OrderList.vue
+++ b/components/lib/orderlist/OrderList.vue
@@ -229,7 +229,7 @@ export default {
         updateListScroll() {
             this.list = DomHandler.findSingle(this.$refs.listbox.$el, '[data-pc-section="list"]');
 
-            const listItems = DomHandler.find(this.list, '[data-pc-section="item"][data-p-highlight="true"]');
+            const listItems = DomHandler.find(this.list, '[data-pc-section="item"][data-p-selected="true"]');
 
             if (listItems && listItems.length) {
                 switch (this.reorderDirection) {
diff --git a/components/lib/paginator/PageLinks.vue b/components/lib/paginator/PageLinks.vue
index 150866d37..28c33672d 100755
--- a/components/lib/paginator/PageLinks.vue
+++ b/components/lib/paginator/PageLinks.vue
@@ -10,7 +10,7 @@
             :aria-current="pageLink - 1 === page ? 'page' : undefined"
             @click="onPageLinkClick($event, pageLink)"
             v-bind="getPTOptions(pageLink - 1, 'page')"
-            :data-p-highlight="pageLink - 1 === page"
+            :data-p-active="pageLink - 1 === page"
         >
             {{ pageLink }}
         </button>
diff --git a/components/lib/panelmenu/PanelMenu.vue b/components/lib/panelmenu/PanelMenu.vue
index 6d426f7a2..0c0795110 100644
--- a/components/lib/panelmenu/PanelMenu.vue
+++ b/components/lib/panelmenu/PanelMenu.vue
@@ -14,7 +14,7 @@
                     @click="onHeaderClick($event, item)"
                     @keydown="onHeaderKeyDown($event, item)"
                     v-bind="getPTOptions('header', item, index)"
-                    :data-p-highlight="isItemActive(item)"
+                    :data-p-active="isItemActive(item)"
                     :data-p-disabled="isItemDisabled(item)"
                 >
                     <div :class="cx('headerContent')" v-bind="getPTOptions('headerContent', item, index)">
@@ -164,14 +164,14 @@ export default {
             }
         },
         onHeaderArrowDownKey(event) {
-            const rootList = DomHandler.getAttribute(event.currentTarget, 'data-p-highlight') === true ? DomHandler.findSingle(event.currentTarget.nextElementSibling, '[data-pc-section="rootlist"]') : null;
+            const rootList = DomHandler.getAttribute(event.currentTarget, 'data-p-active') === true ? DomHandler.findSingle(event.currentTarget.nextElementSibling, '[data-pc-section="rootlist"]') : null;
 
             rootList ? DomHandler.focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: true });
             event.preventDefault();
         },
         onHeaderArrowUpKey(event) {
             const prevHeader = this.findPrevHeader(event.currentTarget.parentElement) || this.findLastHeader();
-            const rootList = DomHandler.getAttribute(prevHeader, 'data-p-highlight') === true ? DomHandler.findSingle(prevHeader.nextElementSibling, '[data-pc-section="rootlist"]') : null;
+            const rootList = DomHandler.getAttribute(prevHeader, 'data-p-active') === true ? DomHandler.findSingle(prevHeader.nextElementSibling, '[data-pc-section="rootlist"]') : null;
 
             rootList ? DomHandler.focus(rootList) : this.updateFocusedHeader({ originalEvent: event, focusOnNext: false });
             event.preventDefault();
diff --git a/components/lib/picklist/PickList.vue b/components/lib/picklist/PickList.vue
index 16c4b52a4..ffceb626d 100755
--- a/components/lib/picklist/PickList.vue
+++ b/components/lib/picklist/PickList.vue
@@ -508,7 +508,7 @@ export default {
             this.updateSelection(event);
         },
         updateListScroll(listElement) {
-            const listItems = DomHandler.find(listElement, '[data-pc-section="item"][data-p-highlight="true"]');
+            const listItems = DomHandler.find(listElement, '[data-pc-section="item"][data-p-selected="true"]');
 
             if (listItems && listItems.length) {
                 switch (this.reorderDirection) {
diff --git a/components/lib/radiobutton/RadioButton.vue b/components/lib/radiobutton/RadioButton.vue
index 75d48a17b..2fca0e570 100755
--- a/components/lib/radiobutton/RadioButton.vue
+++ b/components/lib/radiobutton/RadioButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-highlight="checked" :data-p-disabled="disabled">
+    <div :class="cx('root')" v-bind="getPTOptions('root')" :data-p-checked="checked" :data-p-disabled="disabled">
         <input
             :id="inputId"
             type="radio"
diff --git a/components/lib/select/Select.vue b/components/lib/select/Select.vue
index 403e2afc5..3e5dde158 100755
--- a/components/lib/select/Select.vue
+++ b/components/lib/select/Select.vue
@@ -139,7 +139,7 @@
                                             :aria-posinset="getAriaPosInset(getOptionIndex(i, getItemOptions))"
                                             @click="onOptionSelect($event, option)"
                                             @mousemove="onOptionMouseMove($event, getOptionIndex(i, getItemOptions))"
-                                            :data-p-highlight="isSelected(option)"
+                                            :data-p-selected="isSelected(option)"
                                             :data-p-focused="focusedOptionIndex === getOptionIndex(i, getItemOptions)"
                                             :data-p-disabled="isOptionDisabled(option)"
                                             v-bind="getPTItemOptions(option, getItemOptions, i, 'option')"
diff --git a/components/lib/stepper/Stepper.vue b/components/lib/stepper/Stepper.vue
index 04f3a4c84..e8d50241a 100644
--- a/components/lib/stepper/Stepper.vue
+++ b/components/lib/stepper/Stepper.vue
@@ -12,10 +12,9 @@
                     role="presentation"
                     v-bind="{ ...getStepPT(step, 'root', index), ...getStepPT(step, 'item', index) }"
                     data-pc-name="stepperpanel"
-                    :data-p-highlight="isStepActive(index)"
+                    :data-p-active="isStepActive(index)"
                     :data-p-disabled="isItemDisabled(index)"
                     :data-pc-index="index"
-                    :data-p-active="isStepActive(index)"
                 >
                     <slot name="header">
                         <StepperHeader
@@ -77,10 +76,9 @@
                 :aria-current="isStepActive(index) ? 'step' : undefined"
                 v-bind="{ ...getStepPT(step, 'root', index), ...getStepPT(step, 'panel', index) }"
                 data-pc-name="stepperpanel"
-                :data-p-highlight="isStepActive(index)"
+                :data-p-active="isStepActive(index)"
                 :data-p-disabled="isItemDisabled(index)"
                 :data-pc-index="index"
-                :data-p-active="isStepActive(index)"
             >
                 <div :class="cx('stepper.item', { step, index })" v-bind="getStepPT(step, 'item', index)">
                     <slot name="header">
diff --git a/components/lib/steps/Steps.vue b/components/lib/steps/Steps.vue
index a0ee31aec..19c3baff5 100755
--- a/components/lib/steps/Steps.vue
+++ b/components/lib/steps/Steps.vue
@@ -10,7 +10,7 @@
                     @click="onItemClick($event, item, index)"
                     @keydown="onItemKeydown($event, item, index)"
                     v-bind="getPTOptions('item', item, index)"
-                    :data-p-highlight="isActive(index)"
+                    :data-p-active="isActive(index)"
                     :data-p-disabled="isItemDisabled(item, index)"
                 >
                     <template v-if="!$slots.item">
diff --git a/components/lib/tabmenu/TabMenu.vue b/components/lib/tabmenu/TabMenu.vue
index 1e3d17fbd..c274a0cf2 100755
--- a/components/lib/tabmenu/TabMenu.vue
+++ b/components/lib/tabmenu/TabMenu.vue
@@ -10,7 +10,7 @@
                     @click="onItemClick($event, item, i)"
                     @keydown="onKeydownItem($event, item, i)"
                     v-bind="getPTOptions('item', item, i)"
-                    :data-p-highlight="d_activeIndex === i"
+                    :data-p-active="d_activeIndex === i"
                     :data-p-disabled="disabled(item)"
                 >
                     <template v-if="!$slots.item">
@@ -183,7 +183,7 @@ export default {
             return siblings ? siblings[siblings.length - 1].children[0] : null;
         },
         findActiveItem() {
-            const activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="item"][data-p-disabled="false"][data-p-highlight="true"]');
+            const activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="item"][data-p-disabled="false"][data-p-active="true"]');
 
             return activeItem ? activeItem.children[0] : null;
         },
@@ -193,7 +193,7 @@ export default {
             focusableItem.focus();
         },
         onTabKey() {
-            const activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="item"][data-p-disabled="false"][data-p-highlight="true"]');
+            const activeItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="item"][data-p-disabled="false"][data-p-active="true"]');
             const focusedItem = DomHandler.findSingle(this.$refs.nav, '[data-pc-section="itemlink"][tabindex="0"]');
 
             if (focusedItem !== activeItem.children[0]) {
@@ -217,7 +217,7 @@ export default {
             for (let i = 0; i < tabs.length; i++) {
                 let tab = tabs[i];
 
-                if (DomHandler.getAttribute(tab, 'data-p-highlight')) {
+                if (DomHandler.getAttribute(tab, 'data-p-active')) {
                     this.$refs.inkbar.style.width = DomHandler.getWidth(tab) + 'px';
                     this.$refs.inkbar.style.left = DomHandler.getOffset(tab).left - DomHandler.getOffset(this.$refs.nav).left + 'px';
                     inkHighlighted = true;
diff --git a/components/lib/tabview/TabView.vue b/components/lib/tabview/TabView.vue
index 14ac4c223..7388d4381 100755
--- a/components/lib/tabview/TabView.vue
+++ b/components/lib/tabview/TabView.vue
@@ -27,10 +27,9 @@
                         role="presentation"
                         v-bind="{ ...getTabProp(tab, 'headerProps'), ...getTabPT(tab, 'root', index), ...getTabPT(tab, 'header', index) }"
                         data-pc-name="tabpanel"
-                        :data-p-highlight="d_activeIndex === index"
+                        :data-p-active="d_activeIndex === index"
                         :data-p-disabled="getTabProp(tab, 'disabled')"
                         :data-pc-index="index"
-                        :data-p-active="d_activeIndex === index"
                     >
                         <a
                             :id="getTabHeaderActionId(index)"
diff --git a/components/lib/tieredmenu/TieredMenuSub.vue b/components/lib/tieredmenu/TieredMenuSub.vue
index 21d0b95ed..217ece68c 100755
--- a/components/lib/tieredmenu/TieredMenuSub.vue
+++ b/components/lib/tieredmenu/TieredMenuSub.vue
@@ -16,7 +16,7 @@
                     :aria-setsize="getAriaSetSize()"
                     :aria-posinset="getAriaPosInset(index)"
                     v-bind="getPTOptions(processedItem, index, 'item')"
-                    :data-p-highlight="isItemActive(processedItem)"
+                    :data-p-active="isItemActive(processedItem)"
                     :data-p-focused="isItemFocused(processedItem)"
                     :data-p-disabled="isItemDisabled(processedItem)"
                 >
diff --git a/components/lib/togglebutton/ToggleButton.vue b/components/lib/togglebutton/ToggleButton.vue
index b14058497..9f5df0633 100755
--- a/components/lib/togglebutton/ToggleButton.vue
+++ b/components/lib/togglebutton/ToggleButton.vue
@@ -1,5 +1,5 @@
 <template>
-    <button v-ripple type="button" :class="cx('root')" :tabindex="tabindex" :disabled="disabled" :aria-pressed="modelValue" @click="onChange" v-bind="getPTOptions('root')" :data-p-highlight="active" :data-p-disabled="disabled">
+    <button v-ripple type="button" :class="cx('root')" :tabindex="tabindex" :disabled="disabled" :aria-pressed="modelValue" @click="onChange" v-bind="getPTOptions('root')" :data-p-checked="active" :data-p-disabled="disabled">
         <span :class="cx('content')" v-bind="getPTOptions('content')">
             <slot>
                 <slot name="icon" :value="modelValue" :class="cx('icon')">
diff --git a/components/lib/toggleswitch/ToggleSwitch.vue b/components/lib/toggleswitch/ToggleSwitch.vue
index 24970a6e7..c96135cf7 100755
--- a/components/lib/toggleswitch/ToggleSwitch.vue
+++ b/components/lib/toggleswitch/ToggleSwitch.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :class="cx('root')" :style="sx('root')" v-bind="getPTOptions('root')" :data-p-highlight="checked" :data-p-disabled="disabled">
+    <div :class="cx('root')" :style="sx('root')" v-bind="getPTOptions('root')" :data-p-checked="checked" :data-p-disabled="disabled">
         <input
             :id="inputId"
             type="checkbox"
diff --git a/components/lib/tree/TreeNode.vue b/components/lib/tree/TreeNode.vue
index c7224fc93..aabc290bf 100755
--- a/components/lib/tree/TreeNode.vue
+++ b/components/lib/tree/TreeNode.vue
@@ -14,7 +14,7 @@
         @keydown="onKeyDown"
         v-bind="level === 1 ? getPTOptions('node') : ptm('nodeChildren')"
     >
-        <div :class="cx('nodeContent')" @click="onClick" @touchend="onTouchEnd" :style="node.style" v-bind="getPTOptions('nodeContent')" :data-p-highlight="checkboxMode ? checked : selected" :data-p-selectable="selectable">
+        <div :class="cx('nodeContent')" @click="onClick" @touchend="onTouchEnd" :style="node.style" v-bind="getPTOptions('nodeContent')" :data-p-selected="checkboxMode ? checked : selected" :data-p-selectable="selectable">
             <button v-ripple type="button" :class="cx('nodeToggleButton')" @click="toggle" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('nodeToggleButton')">
                 <template v-if="node.loading && loadingMode === 'icon'">
                     <component v-if="templates['nodetogglericon']" :is="templates['nodetogglericon']" :class="cx('nodetogglericon')" />
diff --git a/components/lib/treeselect/TreeSelect.vue b/components/lib/treeselect/TreeSelect.vue
index e1d4937b6..726794472 100644
--- a/components/lib/treeselect/TreeSelect.vue
+++ b/components/lib/treeselect/TreeSelect.vue
@@ -460,7 +460,7 @@ export default {
         },
         scrollValueInView() {
             if (this.overlay) {
-                let selectedItem = DomHandler.findSingle(this.overlay, '[data-p-highlight="true"]');
+                let selectedItem = DomHandler.findSingle(this.overlay, '[data-p-selected="true"]');
 
                 if (selectedItem) {
                     selectedItem.scrollIntoView({ block: 'nearest', inline: 'start' });
diff --git a/components/lib/treetable/HeaderCell.vue b/components/lib/treetable/HeaderCell.vue
index cc159d4bc..865af0757 100644
--- a/components/lib/treetable/HeaderCell.vue
+++ b/components/lib/treetable/HeaderCell.vue
@@ -10,7 +10,7 @@
         v-bind="{ ...getColumnPT('root'), ...getColumnPT('headerCell') }"
         :data-p-sortable-column="columnProp('sortable')"
         :data-p-resizable-column="resizableColumns"
-        :data-p-highlight="isColumnSorted()"
+        :data-p-sorted="isColumnSorted()"
         :data-p-frozen-column="columnProp('frozen')"
     >
         <span v-if="resizableColumns && !columnProp('frozen')" :class="cx('columnResizer')" @mousedown="onResizeStart" v-bind="getColumnPT('columnResizer')"></span>
diff --git a/components/lib/treetable/TreeTableRow.vue b/components/lib/treetable/TreeTableRow.vue
index b09966e45..b60c95022 100755
--- a/components/lib/treetable/TreeTableRow.vue
+++ b/components/lib/treetable/TreeTableRow.vue
@@ -15,7 +15,7 @@
         @keydown="onKeyDown"
         @touchend="onTouchEnd"
         v-bind="ptm('row', ptmOptions)"
-        :data-p-highlight="selected"
+        :data-p-selected="selected"
     >
         <template v-for="(col, i) of columns" :key="columnProp(col, 'columnKey') || columnProp(col, 'field') || i">
             <TTBodyCell
@@ -290,14 +290,14 @@ export default {
         },
         onTabKey() {
             const rows = [...DomHandler.find(this.$refs.node.parentElement, 'tr')];
-            const hasSelectedRow = rows.some((row) => DomHandler.getAttribute(row, 'data-p-highlight') || row.getAttribute('aria-checked') === 'true');
+            const hasSelectedRow = rows.some((row) => DomHandler.getAttribute(row, 'data-p-selected') || row.getAttribute('aria-checked') === 'true');
 
             rows.forEach((row) => {
                 row.tabIndex = -1;
             });
 
             if (hasSelectedRow) {
-                const selectedNodes = rows.filter((node) => DomHandler.getAttribute(node, 'data-p-highlight') || node.getAttribute('aria-checked') === 'true');
+                const selectedNodes = rows.filter((node) => DomHandler.getAttribute(node, 'data-p-selected') || node.getAttribute('aria-checked') === 'true');
 
                 selectedNodes[0].tabIndex = 0;