diff --git a/components/lib/organizationchart/OrganizationChart.d.ts b/components/lib/organizationchart/OrganizationChart.d.ts
index 8668268556..4d88dd5e6c 100755
--- a/components/lib/organizationchart/OrganizationChart.d.ts
+++ b/components/lib/organizationchart/OrganizationChart.d.ts
@@ -132,29 +132,37 @@ export interface OrganizationChartPassThroughOptions {
      */
     node?: OrganizationChartPassThroughOptionType;
     /**
-     * Used to pass attributes to the nodeToggler's DOM element.
+     * Used to pass attributes to the node toggle button's DOM element.
      */
-    nodeToggler?: OrganizationChartPassThroughOptionType;
+    nodeToggleButton?: OrganizationChartPassThroughOptionType;
     /**
-     * Used to pass attributes to the nodeTogglerIcon's DOM element.
+     * Used to pass attributes to the node toggle button icon's DOM element.
      */
-    nodeTogglerIcon?: OrganizationChartPassThroughOptionType;
+    nodeToggleButtonIcon?: OrganizationChartPassThroughOptionType;
     /**
-     * Used to pass attributes to the lines's DOM element.
+     * Used to pass attributes to the connectors's DOM element.
      */
-    lines?: OrganizationChartPassThroughOptionType;
+    connectors?: OrganizationChartPassThroughOptionType;
     /**
      * Used to pass attributes to the lineCell's DOM element.
      */
     lineCell?: OrganizationChartPassThroughOptionType;
     /**
-     * Used to pass attributes to the lineDown's DOM element.
+     * Used to pass attributes to the connector down's DOM element.
      */
-    lineDown?: OrganizationChartPassThroughOptionType;
+    connectorDown?: OrganizationChartPassThroughOptionType;
     /**
-     * Used to pass attributes to the nodes's DOM element.
+     * Used to pass attributes to the connector left's DOM element.
      */
-    nodes?: OrganizationChartPassThroughOptionType;
+    connectorLeft?: OrganizationChartPassThroughOptionType;
+    /**
+     * Used to pass attributes to the connector right's DOM element.
+     */
+    connectorRight?: OrganizationChartPassThroughOptionType;
+    /**
+     * Used to pass attributes to the node children's DOM element.
+     */
+    nodeChildren?: OrganizationChartPassThroughOptionType;
     /**
      * Used to pass attributes to the nodeCell's DOM element.
      */
diff --git a/components/lib/organizationchart/OrganizationChartNode.vue b/components/lib/organizationchart/OrganizationChartNode.vue
index abc6c38164..b8fc71ee0e 100755
--- a/components/lib/organizationchart/OrganizationChartNode.vue
+++ b/components/lib/organizationchart/OrganizationChartNode.vue
@@ -5,32 +5,32 @@
                 <td :colspan="colspan" v-bind="ptm('cell')">
                     <div :class="[cx('node'), node.styleClass]" @click="onNodeClick" v-bind="getPTOptions('node')">
                         <component :is="templates[node.type] || templates['default']" :node="node" />
-                        <a v-if="toggleable" tabindex="0" :class="cx('nodeToggler')" @click="toggleNode" @keydown="onKeydown" v-bind="getPTOptions('nodeToggler')">
-                            <component v-if="templates.togglericon" :is="templates.togglericon" :expanded="expanded" class="p-node-toggler-icon" />
-                            <component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" :class="cx('nodeTogglerIcon')" v-bind="getPTOptions('nodeTogglerIcon')" />
+                        <a v-if="toggleable" tabindex="0" :class="cx('nodeToggleButton')" @click="toggleNode" @keydown="onKeydown" v-bind="getPTOptions('nodeToggleButton')">
+                            <component v-if="templates.togglericon" :is="templates.togglericon" :expanded="expanded" :class="cx('nodeToggleButtonIcon')" v-bind="getPTOptions('nodeToggleButtonIcon')" />
+                            <component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" :class="cx('nodeToggleButtonIcon')" v-bind="getPTOptions('nodeToggleButtonIcon')" />
                         </a>
                     </div>
                 </td>
             </tr>
-            <tr :style="childStyle" :class="cx('lines')" v-bind="ptm('lines')">
+            <tr :style="childStyle" :class="cx('connectors')" v-bind="ptm('connectors')">
                 <td :colspan="colspan" v-bind="ptm('lineCell')">
-                    <div :class="cx('lineDown')" v-bind="ptm('lineDown')"></div>
+                    <div :class="cx('connectorDown')" v-bind="ptm('connectorDown')"></div>
                 </td>
             </tr>
-            <tr :style="childStyle" :class="cx('lines')" v-bind="ptm('lines')">
+            <tr :style="childStyle" :class="cx('connectors')" v-bind="ptm('connectors')">
                 <template v-if="node.children && node.children.length === 1">
                     <td :colspan="colspan" v-bind="ptm('lineCell')">
-                        <div :class="cx('lineDown')" v-bind="ptm('lineDown')"></div>
+                        <div :class="cx('connectorDown')" v-bind="ptm('connectorDown')"></div>
                     </td>
                 </template>
                 <template v-if="node.children && node.children.length > 1">
                     <template v-for="(child, i) of node.children" :key="child.key">
-                        <td :class="cx('lineLeft', { index: i })" v-bind="getNodeOptions(!(i === 0), 'lineLeft')">&nbsp;</td>
-                        <td :class="cx('lineRight', { index: i })" v-bind="getNodeOptions(!(i === node.children.length - 1), 'lineRight')">&nbsp;</td>
+                        <td :class="cx('connectorLeft', { index: i })" v-bind="getNodeOptions(!(i === 0), 'connectorLeft')">&nbsp;</td>
+                        <td :class="cx('connectorRight', { index: i })" v-bind="getNodeOptions(!(i === node.children.length - 1), 'connectorRight')">&nbsp;</td>
                     </template>
                 </template>
             </tr>
-            <tr :style="childStyle" :class="cx('nodes')" v-bind="ptm('nodes')">
+            <tr :style="childStyle" :class="cx('nodeChildren')" v-bind="ptm('nodeChildren')">
                 <td v-for="child of node.children" :key="child.key" colspan="2" v-bind="ptm('nodeCell')">
                     <OrganizationChartNode
                         :node="child"
@@ -107,7 +107,7 @@ export default {
             });
         },
         onNodeClick(event) {
-            if (DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'nodetoggler') || DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'nodetogglericon')) {
+            if (DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'nodetogglebutton') || DomHandler.isAttributeEquals(event.target, 'data-pc-section', 'nodetogglebuttonicon')) {
                 return;
             }
 
diff --git a/components/lib/organizationchart/style/OrganizationChartStyle.js b/components/lib/organizationchart/style/OrganizationChartStyle.js
index 6aeb7e5c6e..8cfedb47ed 100644
--- a/components/lib/organizationchart/style/OrganizationChartStyle.js
+++ b/components/lib/organizationchart/style/OrganizationChartStyle.js
@@ -114,13 +114,13 @@ const classes = {
     root: 'p-organizationchart p-component',
     table: 'p-organizationchart-table',
     node: ({ instance }) => ['p-organizationchart-node', { 'p-organizationchart-node-selectable': instance.selectable, 'p-highlight': instance.selected }],
-    nodeToggler: 'p-organizationchart-node-toggle-button',
-    nodeTogglerIcon: 'p-organizationchart-node-toggle-button-icon',
-    lines: 'p-organizationchart-connectors',
-    lineDown: 'p-organizationchart-connector-down',
-    lineLeft: ({ index }) => ['p-organizationchart-connector-left', { 'p-organizationchart-connector-top': !(index === 0) }],
-    lineRight: ({ props, index }) => ['p-organizationchart-connector-right', { 'p-organizationchart-connector-top': !(index === props.node.children.length - 1) }],
-    nodes: 'p-organizationchart-node-children'
+    nodeToggleButton: 'p-organizationchart-node-toggle-button',
+    nodeToggleButtonIcon: 'p-organizationchart-node-toggle-button-icon',
+    connectors: 'p-organizationchart-connectors',
+    connectorDown: 'p-organizationchart-connector-down',
+    connectorLeft: ({ index }) => ['p-organizationchart-connector-left', { 'p-organizationchart-connector-top': !(index === 0) }],
+    connectorRight: ({ props, index }) => ['p-organizationchart-connector-right', { 'p-organizationchart-connector-top': !(index === props.node.children.length - 1) }],
+    nodeChildren: 'p-organizationchart-node-children'
 };
 
 export default BaseStyle.extend({
diff --git a/components/lib/paginator/FirstPageLink.vue b/components/lib/paginator/FirstPageLink.vue
index ae204d77a4..ff463da4d1 100755
--- a/components/lib/paginator/FirstPageLink.vue
+++ b/components/lib/paginator/FirstPageLink.vue
@@ -1,6 +1,6 @@
 <template>
-    <button v-ripple :class="cx('firstPageButton')" type="button" v-bind="getPTOptions('firstPageButton')" data-pc-group-section="pagebutton">
-        <component :is="template || 'AngleDoubleLeftIcon'" :class="cx('firstPageIcon')" v-bind="getPTOptions('firstPageIcon')" />
+    <button v-ripple :class="cx('first')" type="button" v-bind="getPTOptions('first')" data-pc-group-section="pagebutton">
+        <component :is="template || 'AngleDoubleLeftIcon'" :class="cx('firstIcon')" v-bind="getPTOptions('firstIcon')" />
     </button>
 </template>
 
diff --git a/components/lib/paginator/LastPageLink.vue b/components/lib/paginator/LastPageLink.vue
index 4e1a8c8cbf..b5af10c404 100755
--- a/components/lib/paginator/LastPageLink.vue
+++ b/components/lib/paginator/LastPageLink.vue
@@ -1,6 +1,6 @@
 <template>
-    <button v-ripple :class="cx('lastPageButton')" type="button" v-bind="getPTOptions('lastPageButton')" data-pc-group-section="pagebutton">
-        <component :is="template || 'AngleDoubleRightIcon'" :class="cx('lastPageIcon')" v-bind="getPTOptions('lastPageIcon')" />
+    <button v-ripple :class="cx('last')" type="button" v-bind="getPTOptions('last')" data-pc-group-section="pagebutton">
+        <component :is="template || 'AngleDoubleRightIcon'" :class="cx('lastIcon')" v-bind="getPTOptions('lastIcon')" />
     </button>
 </template>
 
diff --git a/components/lib/paginator/NextPageLink.vue b/components/lib/paginator/NextPageLink.vue
index e6e82ad23f..b4d6c30b70 100755
--- a/components/lib/paginator/NextPageLink.vue
+++ b/components/lib/paginator/NextPageLink.vue
@@ -1,6 +1,6 @@
 <template>
-    <button v-ripple :class="cx('nextPageButton')" type="button" v-bind="getPTOptions('nextPageButton')" data-pc-group-section="pagebutton">
-        <component :is="template || 'AngleRightIcon'" :class="cx('nextPageIcon')" v-bind="getPTOptions('nextPageIcon')" />
+    <button v-ripple :class="cx('next')" type="button" v-bind="getPTOptions('next')" data-pc-group-section="pagebutton">
+        <component :is="template || 'AngleRightIcon'" :class="cx('nextIcon')" v-bind="getPTOptions('nextIcon')" />
     </button>
 </template>
 
diff --git a/components/lib/paginator/PageLinks.vue b/components/lib/paginator/PageLinks.vue
index ade23189a0..150866d370 100755
--- a/components/lib/paginator/PageLinks.vue
+++ b/components/lib/paginator/PageLinks.vue
@@ -4,12 +4,12 @@
             v-for="pageLink of value"
             :key="pageLink"
             v-ripple
-            :class="cx('pageButton', { pageLink })"
+            :class="cx('page', { pageLink })"
             type="button"
             :aria-label="ariaPageLabel(pageLink)"
             :aria-current="pageLink - 1 === page ? 'page' : undefined"
             @click="onPageLinkClick($event, pageLink)"
-            v-bind="getPTOptions(pageLink - 1, 'pageButton')"
+            v-bind="getPTOptions(pageLink - 1, 'page')"
             :data-p-highlight="pageLink - 1 === page"
         >
             {{ pageLink }}
diff --git a/components/lib/paginator/Paginator.d.ts b/components/lib/paginator/Paginator.d.ts
index db1090ac56..644276fa91 100755
--- a/components/lib/paginator/Paginator.d.ts
+++ b/components/lib/paginator/Paginator.d.ts
@@ -74,41 +74,41 @@ export interface PaginatorPassThroughOptions<T = any> {
      */
     root?: PaginatorPassThroughOptionType<T>;
     /**
-     * Used to pass attributes to the start's DOM element.
+     * Used to pass attributes to the content start's DOM element.
      */
-    start?: PaginatorPassThroughOptionType<T>;
+    contentStart?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the first page button's DOM element.
      */
-    firstPageButton?: PaginatorPassThroughOptionType<T>;
+    first?: PaginatorPassThroughOptionType<T>;
     /**
-     * Used to pass attributes to the first page icon's DOM element.
+     * Used to pass attributes to the first icon's DOM element.
      */
-    firstPageIcon?: PaginatorPassThroughOptionType<T>;
+    firstIcon?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the prev page button's DOM element.
      */
-    previousPageButton?: PaginatorPassThroughOptionType<T>;
+    prev?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the prev page icon's DOM element.
      */
-    previousPageIcon?: PaginatorPassThroughOptionType<T>;
+    prevIcon?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the next page button's DOM element.
      */
-    nextPageButton?: PaginatorPassThroughOptionType<T>;
+    next?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the next page icon's DOM element.
      */
-    nextPageIcon?: PaginatorPassThroughOptionType<T>;
+    nextIcon?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the last page button's DOM element.
      */
-    lastPageButton?: PaginatorPassThroughOptionType<T>;
+    last?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the last page icon's DOM element.
      */
-    lastPageIcon?: PaginatorPassThroughOptionType<T>;
+    lastIcon?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the pages's DOM element.
      */
@@ -116,7 +116,7 @@ export interface PaginatorPassThroughOptions<T = any> {
     /**
      * Used to pass attributes to the page button's DOM element.
      */
-    pageButton?: PaginatorPassThroughOptionType<T>;
+    page?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to pass attributes to the current's DOM element.
      */
@@ -137,9 +137,9 @@ export interface PaginatorPassThroughOptions<T = any> {
      */
     jumpToPageInput?: InputNumberPassThroughOptions<PaginatorSharedPassThroughMethodOptions>;
     /**
-     * Used to pass attributes to the end's DOM element.
+     * Used to pass attributes to the content end's DOM element.
      */
-    end?: PaginatorPassThroughOptionType<T>;
+    contentEnd?: PaginatorPassThroughOptionType<T>;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
diff --git a/components/lib/paginator/Paginator.vue b/components/lib/paginator/Paginator.vue
index 93eb8e214f..8bc47861b1 100755
--- a/components/lib/paginator/Paginator.vue
+++ b/components/lib/paginator/Paginator.vue
@@ -1,7 +1,7 @@
 <template>
     <nav v-if="alwaysShow ? true : pageLinks && pageLinks.length > 1" v-bind="ptmi('paginatorWrapper')">
         <div v-for="(value, key) in templateItems" :key="key" ref="paginator" :class="cx('paginator', { key })" v-bind="ptm('root')">
-            <div v-if="$slots.start" :class="cx('start')" v-bind="ptm('start')">
+            <div v-if="$slots.start" :class="cx('contentStart')" v-bind="ptm('contentStart')">
                 <slot name="start" :state="currentState"></slot>
             </div>
             <template v-for="item in value" :key="item">
@@ -47,7 +47,7 @@
                 />
                 <JumpToPageInput v-else-if="item === 'JumpToPageInput'" :page="currentPage" @page-change="changePage($event)" :disabled="empty" :unstyled="unstyled" :pt="pt" />
             </template>
-            <div v-if="$slots.end" :class="cx('end')" v-bind="ptm('end')">
+            <div v-if="$slots.end" :class="cx('contentEnd')" v-bind="ptm('contentEnd')">
                 <slot name="end" :state="currentState"></slot>
             </div>
         </div>
diff --git a/components/lib/paginator/PrevPageLink.vue b/components/lib/paginator/PrevPageLink.vue
index 85b5afab8c..b7a5726032 100755
--- a/components/lib/paginator/PrevPageLink.vue
+++ b/components/lib/paginator/PrevPageLink.vue
@@ -1,6 +1,6 @@
 <template>
-    <button v-ripple :class="cx('previousPageButton')" type="button" v-bind="getPTOptions('previousPageButton')" data-pc-group-section="pagebutton">
-        <component :is="template || 'AngleLeftIcon'" :class="cx('previousPageIcon')" v-bind="getPTOptions('previousPageIcon')" />
+    <button v-ripple :class="cx('prev')" type="button" v-bind="getPTOptions('prev')" data-pc-group-section="pagebutton">
+        <component :is="template || 'AngleLeftIcon'" :class="cx('prevIcon')" v-bind="getPTOptions('prevIcon')" />
     </button>
 </template>
 
diff --git a/components/lib/paginator/style/PaginatorStyle.js b/components/lib/paginator/style/PaginatorStyle.js
index 2ec5a79c59..9df9770897 100644
--- a/components/lib/paginator/style/PaginatorStyle.js
+++ b/components/lib/paginator/style/PaginatorStyle.js
@@ -83,38 +83,38 @@ const classes = {
             [`p-paginator-${key}`]: instance.hasBreakpoints()
         }
     ],
-    start: 'p-paginator-content-start',
-    end: 'p-paginator-content-end',
-    firstPageButton: ({ instance }) => [
+    contentStart: 'p-paginator-content-start',
+    contentEnd: 'p-paginator-content-end',
+    first: ({ instance }) => [
         'p-paginator-first',
         {
             'p-disabled': instance.$attrs.disabled
         }
     ],
-    firstPageIcon: 'p-paginator-first-icon',
-    previousPageButton: ({ instance }) => [
+    firstIcon: 'p-paginator-first-icon',
+    prev: ({ instance }) => [
         'p-paginator-prev',
         {
             'p-disabled': instance.$attrs.disabled
         }
     ],
-    previousPageIcon: 'p-paginator-prev-icon',
-    nextPageButton: ({ instance }) => [
+    prevIcon: 'p-paginator-prev-icon',
+    next: ({ instance }) => [
         'p-paginator-next',
         {
             'p-disabled': instance.$attrs.disabled
         }
     ],
-    nextPageIcon: 'p-paginator-next-icon',
-    lastPageButton: ({ instance }) => [
+    nextIcon: 'p-paginator-next-icon',
+    last: ({ instance }) => [
         'p-paginator-last',
         {
             'p-disabled': instance.$attrs.disabled
         }
     ],
-    lastPageIcon: 'p-paginator-last-icon',
+    lastIcon: 'p-paginator-last-icon',
     pages: 'p-paginator-pages',
-    pageButton: ({ props, pageLink }) => [
+    page: ({ props, pageLink }) => [
         'p-paginator-page',
         {
             'p-paginator-page-active': pageLink - 1 === props.page
diff --git a/components/lib/picklist/PickList.d.ts b/components/lib/picklist/PickList.d.ts
index a77ba9ac09..f8adf79e15 100755
--- a/components/lib/picklist/PickList.d.ts
+++ b/components/lib/picklist/PickList.d.ts
@@ -169,17 +169,17 @@ export interface PickListPassThroughOptions {
      */
     sourceMoveBottomButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
     /**
-     * Used to pass attributes to the source wrapper's DOM element.
+     * Used to pass attributes to the source list containerr's DOM element.
      */
-    sourceWrapper?: PickListPassThroughOptionType;
+    sourceListContainer?: PickListPassThroughOptionType;
     /**
      * Used to pass attributes to the source list's DOM element.
      */
     sourceList?: PickListPassThroughOptionType;
     /**
-     * Used to pass attributes to the buttons' DOM element.
+     * Used to pass attributes to the transfer controls' DOM element.
      */
-    buttons?: PickListPassThroughOptionType;
+    transferControls?: PickListPassThroughOptionType;
     /**
      * Used to pass attributes to the Button component.
      */
@@ -197,9 +197,9 @@ export interface PickListPassThroughOptions {
      */
     moveAllToSourceButton?: ButtonPassThroughOptions<PickListSharedPassThroughMethodOptions>;
     /**
-     * Used to pass attributes to the target wrapper's DOM element.
+     * Used to pass attributes to the target list container's DOM element.
      */
-    targetWrapper?: PickListPassThroughOptionType;
+    targetListContainer?: PickListPassThroughOptionType;
     /**
      * Used to pass attributes to the target list's DOM element.
      */
diff --git a/components/lib/picklist/PickList.vue b/components/lib/picklist/PickList.vue
index 9b7a71d0ed..2924a995ac 100755
--- a/components/lib/picklist/PickList.vue
+++ b/components/lib/picklist/PickList.vue
@@ -32,7 +32,7 @@
             </Button>
             <slot name="sourcecontrolsend"></slot>
         </div>
-        <div :class="cx('sourceWrapper')" v-bind="ptm('sourceWrapper')" data-pc-group-section="listwrapper">
+        <div :class="cx('sourceListContainer')" v-bind="ptm('sourceListContainer')" data-pc-group-section="listcontainer">
             <Listbox
                 ref="sourceList"
                 :id="idSource + '_list'"
@@ -64,7 +64,7 @@
                 </template>
             </Listbox>
         </div>
-        <div :class="cx('buttons')" v-bind="ptm('buttons')" data-pc-group-section="controls">
+        <div :class="cx('transferControls')" v-bind="ptm('transferControls')" data-pc-group-section="controls">
             <slot name="movecontrolsstart"></slot>
             <Button :aria-label="moveToTargetAriaLabel" @click="moveToTarget" :disabled="moveDisabled(0)" v-bind="{ ...buttonProps, ...moveToTargetProps }" :pt="ptm('moveToTargetButton')" :unstyled="unstyled">
                 <template #icon>
@@ -96,7 +96,7 @@
             </Button>
             <slot name="movecontrolsend"></slot>
         </div>
-        <div :class="cx('targetWrapper')" v-bind="ptm('targetWrapper')" data-pc-group-section="listwrapper">
+        <div :class="cx('targetListContainer')" v-bind="ptm('targetListContainer')" data-pc-group-section="listcontainer">
             <Listbox
                 ref="targetList"
                 :id="idTarget + '_list'"
diff --git a/components/lib/picklist/style/PickListStyle.js b/components/lib/picklist/style/PickListStyle.js
index 6467ff6e02..32edfb11e0 100644
--- a/components/lib/picklist/style/PickListStyle.js
+++ b/components/lib/picklist/style/PickListStyle.js
@@ -25,9 +25,9 @@ const theme = ({ dt }) => `
 const classes = {
     root: 'p-picklist p-component',
     sourceControls: 'p-picklist-controls p-picklist-source-controls',
-    sourceWrapper: 'p-picklist-list-container p-picklist-source-list-container',
-    buttons: 'p-picklist-controls p-picklist-transfer-controls',
-    targetWrapper: 'p-picklist-list-container p-picklist-target-list-container',
+    sourceListContainer: 'p-picklist-list-container p-picklist-source-list-container',
+    transferControls: 'p-picklist-controls p-picklist-transfer-controls',
+    targetListContainer: 'p-picklist-list-container p-picklist-target-list-container',
     targetControls: 'p-picklist-controls p-picklist-target-controls'
 };
 
diff --git a/components/lib/timeline/Timeline.d.ts b/components/lib/timeline/Timeline.d.ts
index 0819df339c..bfb83710da 100644
--- a/components/lib/timeline/Timeline.d.ts
+++ b/components/lib/timeline/Timeline.d.ts
@@ -57,25 +57,25 @@ export interface TimelinePassThroughOptions {
      */
     event?: TimelinePassThroughOptionType;
     /**
-     * Used to pass attributes to the opposite's DOM element.
+     * Used to pass attributes to the event opposite's DOM element.
      */
-    opposite?: TimelinePassThroughOptionType;
+    eventOpposite?: TimelinePassThroughOptionType;
     /**
-     * Used to pass attributes to the separator's DOM element.
+     * Used to pass attributes to the event separator's DOM element.
      */
-    separator?: TimelinePassThroughOptionType;
+    eventSeparator?: TimelinePassThroughOptionType;
     /**
-     * Used to pass attributes to the marker's DOM element.
+     * Used to pass attributes to the event marker's DOM element.
      */
-    marker?: TimelinePassThroughOptionType;
+    eventMarker?: TimelinePassThroughOptionType;
     /**
-     * Used to pass attributes to the connector's DOM element.
+     * Used to pass attributes to the event connector's DOM element.
      */
-    connector?: TimelinePassThroughOptionType;
+    eventConnector?: TimelinePassThroughOptionType;
     /**
-     * Used to pass attributes to the content's DOM element.
+     * Used to pass attributes to the event content's DOM element.
      */
-    content?: TimelinePassThroughOptionType;
+    eventContent?: TimelinePassThroughOptionType;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
diff --git a/components/lib/timeline/Timeline.vue b/components/lib/timeline/Timeline.vue
index 376137155b..3a0e20ea50 100644
--- a/components/lib/timeline/Timeline.vue
+++ b/components/lib/timeline/Timeline.vue
@@ -1,18 +1,18 @@
 <template>
     <div :class="cx('root')" v-bind="ptmi('root')">
         <div v-for="(item, index) of value" :key="getKey(item, index)" :class="cx('event')" v-bind="getPTOptions('event', index)">
-            <div :class="cx('opposite', { index })" v-bind="getPTOptions('opposite', index)">
+            <div :class="cx('eventOpposite', { index })" v-bind="getPTOptions('eventOpposite', index)">
                 <slot name="opposite" :item="item" :index="index"></slot>
             </div>
-            <div :class="cx('separator')" v-bind="getPTOptions('separator', index)">
+            <div :class="cx('eventSeparator')" v-bind="getPTOptions('eventSeparator', index)">
                 <slot name="marker" :item="item" :index="index">
-                    <div :class="cx('marker')" v-bind="getPTOptions('marker', index)"></div>
+                    <div :class="cx('eventMarker')" v-bind="getPTOptions('eventMarker', index)"></div>
                 </slot>
                 <slot v-if="index !== value.length - 1" name="connector" :item="item" :index="index">
-                    <div :class="cx('connector')" v-bind="getPTOptions('connector', index)"></div>
+                    <div :class="cx('eventConnector')" v-bind="getPTOptions('eventConnector', index)"></div>
                 </slot>
             </div>
-            <div :class="cx('content')" v-bind="getPTOptions('content', index)">
+            <div :class="cx('eventContent')" v-bind="getPTOptions('eventContent', index)">
                 <slot name="content" :item="item" :index="index"></slot>
             </div>
         </div>
diff --git a/components/lib/timeline/style/TimelineStyle.js b/components/lib/timeline/style/TimelineStyle.js
index d4995e70ce..999c5e523a 100644
--- a/components/lib/timeline/style/TimelineStyle.js
+++ b/components/lib/timeline/style/TimelineStyle.js
@@ -157,11 +157,11 @@ const theme = ({ dt }) => `
 const classes = {
     root: ({ props }) => ['p-timeline p-component', 'p-timeline-' + props.align, 'p-timeline-' + props.layout],
     event: 'p-timeline-event',
-    opposite: 'p-timeline-event-opposite',
-    separator: 'p-timeline-event-separator',
-    marker: 'p-timeline-event-marker',
-    connector: 'p-timeline-event-connector',
-    content: 'p-timeline-event-content'
+    eventOpposite: 'p-timeline-event-opposite',
+    eventSeparator: 'p-timeline-event-separator',
+    eventMarker: 'p-timeline-event-marker',
+    eventConnector: 'p-timeline-event-connector',
+    eventContent: 'p-timeline-event-content'
 };
 
 export default BaseStyle.extend({