diff --git a/components/lib/autocomplete/AutoComplete.d.ts b/components/lib/autocomplete/AutoComplete.d.ts
index ea944faf2..2e21e0916 100755
--- a/components/lib/autocomplete/AutoComplete.d.ts
+++ b/components/lib/autocomplete/AutoComplete.d.ts
@@ -149,26 +149,26 @@ export interface AutoCompletePassThroughOptions {
      */
     input?: InputTextPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions> | AutoCompletePassThroughOptionType;
     /**
-     * Used to pass attributes to the container's DOM element.
+     * Used to pass attributes to the input multiple's DOM element.
      */
-    container?: AutoCompletePassThroughOptionType;
+    inputMultiple?: AutoCompletePassThroughOptionType;
     /**
-     * Used to pass attributes to the token's DOM element.
+     * Used to pass attributes to the chip's DOM element.
      */
-    token?: AutoCompletePassThroughOptionType;
+    chip?: AutoCompletePassThroughOptionType;
     /**
      * Used to pass attributes to the Chip.
      * @see {@link ChipPassThroughOptions}
      */
-    tokenLabel?: ChipPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>;
+    chipLabel?: ChipPassThroughOptions<AutoCompleteSharedPassThroughMethodOptions>;
     /**
-     * Used to pass attributes to the remove token icon's DOM element.
+     * Used to pass attributes to the chip icon's DOM element.
      */
-    removeTokenIcon?: AutoCompletePassThroughOptionType;
+    chipIcon?: AutoCompletePassThroughOptionType;
     /**
-     * Used to pass attributes to the input token's DOM element.
+     * Used to pass attributes to the input chip's DOM element.
      */
-    inputToken?: AutoCompletePassThroughOptionType;
+    inputChip?: AutoCompletePassThroughOptionType;
     /**
      * Used to pass attributes to the loading icon's DOM element.
      */
@@ -441,6 +441,10 @@ export interface AutoCompleteProps {
      * @deprecated since v3.27.0. Use 'removetokenicon' slot.
      */
     removeTokenIcon?: string | undefined;
+    /**
+     * Icon to display in chip remove action.
+     */
+    chipIcon?: string | undefined;
     /**
      * Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it.
      * @type {VirtualScrollerProps}
@@ -658,7 +662,9 @@ export interface AutoCompleteSlots {
         class: string;
     }): VNode[];
     /**
-     * Custom remove token icon template in multiple mode.
+     * @deprecated since v4.0. Use 'chipicon' slot instead.
+     * Custom chip icon template in multiple mode.
+     * @param {Object} scope - chip icon slot's params.
      */
     removetokenicon(scope: {
         /**
@@ -681,6 +687,31 @@ export interface AutoCompleteSlots {
          */
         removeCallback: (event: Event, index: number) => void;
     }): VNode[];
+    /**
+     * Custom chip icon template in multiple mode.
+     * @param {Object} scope - chip icon slot's params.
+     */
+    chipicon(scope: {
+        /**
+         * Style class of the icon.
+         */
+        class: string;
+        /**
+         * Index of the token.
+         */
+        index: number;
+        /**
+         * Remove token icon function.
+         * @param {Event} event - Browser event
+         * @deprecated since v3.39.0. Use 'removeCallback' property instead.
+         */
+        onClick: (event: Event, index: number) => void;
+        /**
+         * Remove token icon function.
+         * @param {Event} event - Browser event
+         */
+        removeCallback: (event: Event, index: number) => void;
+    }): VNode[];
     /**
      * Custom loading icon template.
      */
diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue
index f1664ef84..1b2c37a8d 100755
--- a/components/lib/autocomplete/AutoComplete.vue
+++ b/components/lib/autocomplete/AutoComplete.vue
@@ -33,7 +33,7 @@
         <ul
             v-if="multiple"
             ref="multiContainer"
-            :class="cx('container')"
+            :class="cx('inputMultiple')"
             tabindex="-1"
             role="listbox"
             aria-orientation="horizontal"
@@ -41,7 +41,7 @@
             @focus="onMultipleContainerFocus"
             @blur="onMultipleContainerBlur"
             @keydown="onMultipleContainerKeyDown"
-            v-bind="ptm('container')"
+            v-bind="ptm('inputMultiple')"
         >
             <li
                 v-for="(option, i) of modelValue"
@@ -56,14 +56,15 @@
                 v-bind="ptm('token')"
             >
                 <slot name="chip" :value="option" :index="i" :removeCallback="(event) => removeOption(event, i)">
-                    <Chip :class="cx('tokenLabel')" :label="getOptionLabel(option)" :removeIcon="removeTokenIcon" removable :unstyled="unstyled" @remove="removeOption($event, i)" :pt="ptm('tokenLabel')">
+                    <!-- TODO: removetokenicon and removeTokenIcon  deprecated since v4.0. Use chipicon slot and chipIcon prop-->
+                    <Chip :class="cx('chipLabel')" :label="getOptionLabel(option)" :removeIcon="removeTokenIcon || chipIcon" removable :unstyled="unstyled" @remove="removeOption($event, i)" :pt="ptm('chipLabel')">
                         <template #removeicon>
-                            <slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :removeCallback="(event) => removeOption(event, i)" />
+                            <slot :name="$slots.removetokenicon ? 'removetokenicon' : 'chipicon'" :class="cx('chipIcon')" :index="i" :removeCallback="(event) => removeOption(event, i)" />
                         </template>
                     </Chip>
                 </slot>
             </li>
-            <li :class="cx('inputToken')" role="option" v-bind="ptm('inputToken')">
+            <li :class="cx('inputChip')" role="option" v-bind="ptm('inputChip')">
                 <input
                     ref="focusInput"
                     :id="inputId"
diff --git a/components/lib/autocomplete/BaseAutoComplete.vue b/components/lib/autocomplete/BaseAutoComplete.vue
index 2e9ec74a7..160af4512 100644
--- a/components/lib/autocomplete/BaseAutoComplete.vue
+++ b/components/lib/autocomplete/BaseAutoComplete.vue
@@ -107,7 +107,7 @@ export default {
         },
         dropdownIcon: {
             type: String,
-            default: undefined
+            default: null
         },
         dropdownClass: {
             type: [String, Object],
@@ -115,11 +115,15 @@ export default {
         },
         loadingIcon: {
             type: String,
-            default: undefined
+            default: null
         },
         removeTokenIcon: {
             type: String,
-            default: undefined
+            default: null
+        },
+        chipIcon: {
+            type: String,
+            default: null
         },
         virtualScrollerOptions: {
             type: Object,
diff --git a/components/lib/autocomplete/style/AutoCompleteStyle.js b/components/lib/autocomplete/style/AutoCompleteStyle.js
index 371cd01ba..2a188a2a0 100644
--- a/components/lib/autocomplete/style/AutoCompleteStyle.js
+++ b/components/lib/autocomplete/style/AutoCompleteStyle.js
@@ -233,21 +233,21 @@ const classes = {
         }
     ],
     input: 'p-autocomplete-input',
-    container: ({ props, instance }) => [
+    inputMultiple: ({ props, instance }) => [
         'p-autocomplete-input-multiple',
         {
             'p-variant-filled': props.variant ? props.variant === 'filled' : instance.$primevue.config.inputStyle === 'filled'
         }
     ],
-    token: ({ instance, i }) => [
+    chip: ({ instance, i }) => [
         'p-autocomplete-chip',
         {
             'p-focus': instance.focusedMultipleOptionIndex === i
         }
     ],
-    tokenLabel: 'p-autocomplete-chip-label',
-    removeTokenIcon: 'p-autocomplete-chip-icon',
-    inputToken: 'p-autocomplete-input-chip',
+    chipLabel: 'p-autocomplete-chip-label',
+    chipIcon: 'p-autocomplete-chip-icon',
+    inputChip: 'p-autocomplete-input-chip',
     loadingIcon: 'p-autocomplete-loader',
     dropdownButton: 'p-autocomplete-dropdown',
     panel: ({ instance }) => [
diff --git a/components/lib/cascadeselect/BaseCascadeSelect.vue b/components/lib/cascadeselect/BaseCascadeSelect.vue
index fd1cc1555..dfbd36683 100644
--- a/components/lib/cascadeselect/BaseCascadeSelect.vue
+++ b/components/lib/cascadeselect/BaseCascadeSelect.vue
@@ -52,6 +52,18 @@ export default {
             type: null,
             default: null
         },
+        overlayClass: {
+            type: [String, Object],
+            default: null
+        },
+        overlayStyle: {
+            type: Object,
+            default: null
+        },
+        overlayProps: {
+            type: null,
+            default: null
+        },
         appendTo: {
             type: [String, Object],
             default: 'body'
diff --git a/components/lib/cascadeselect/CascadeSelect.d.ts b/components/lib/cascadeselect/CascadeSelect.d.ts
index 675f25af5..e093ed315 100644
--- a/components/lib/cascadeselect/CascadeSelect.d.ts
+++ b/components/lib/cascadeselect/CascadeSelect.d.ts
@@ -91,7 +91,7 @@ export interface CascadeSelectPassThroughOptions {
     /**
      * Used to pass attributes to the dropdown button's DOM element.
      */
-    dropdownButton?: CascadeSelectPassThroughOptionType;
+    dropdown?: CascadeSelectPassThroughOptionType;
     /**
      * Used to pass attributes to the dropdown icon's DOM element.
      */
@@ -101,9 +101,13 @@ export interface CascadeSelectPassThroughOptions {
      */
     loadingIcon?: CascadeSelectPassThroughOptionType;
     /**
-     * Used to pass attributes to the panel's DOM element.
+     * Used to pass attributes to the overlay's DOM element.
      */
-    panel?: CascadeSelectPassThroughOptionType;
+    overlay?: CascadeSelectPassThroughOptionType;
+    /**
+     * Used to pass attributes to the list container's DOM element.
+     */
+    listContainer?: CascadeSelectPassThroughOptionType;
     /**
      * Used to pass attributes to the list's DOM element.
      */
@@ -113,13 +117,17 @@ export interface CascadeSelectPassThroughOptions {
      */
     item?: CascadeSelectPassThroughOptionType;
     /**
-     * Used to pass attributes to the content's DOM element.
+     * Used to pass attributes to the item content's DOM element.
      */
-    content?: CascadeSelectPassThroughOptionType;
+    itemContent?: CascadeSelectPassThroughOptionType;
     /**
-     * Used to pass attributes to the text's DOM element.
+     * Used to pass attributes to the item text's DOM element.
      */
-    text?: CascadeSelectPassThroughOptionType;
+    itemText?: CascadeSelectPassThroughOptionType;
+    /**
+     * Used to pass attributes to the item list's DOM element.
+     */
+    itemList?: CascadeSelectPassThroughOptionType;
     /**
      * Used to pass attributes to the group icon's DOM element.
      */
@@ -307,17 +315,32 @@ export interface CascadeSelectProps {
      */
     inputProps?: InputHTMLAttributes | undefined;
     /**
-     * Inline style of the overlay panel.
+     * @deprecated since v4.0. Use 'overlayStyle' prop.
+     * Inline style of the overlay overlay.
      */
     panelStyle?: object | undefined;
     /**
-     * Style class of the overlay panel.
+     * @deprecated since v4.0. Use 'overlayClass' prop.
+     * Style class of the overlay overlay.
      */
     panelClass?: string | object | undefined;
     /**
-     * Used to pass all properties of the HTMLDivElement to the overlay panel inside the component.
+     * @deprecated since v4.0. Use 'overlayProps' prop.
+     * Used to pass all properties of the HTMLDivElement to the overlay overlay inside the component.
      */
     panelProps?: HTMLAttributes | undefined;
+    /**
+     * Inline style of the overlay overlay.
+     */
+    overlayStyle?: object | undefined;
+    /**
+     * Style class of the overlay overlay.
+     */
+    overlayClass?: string | object | undefined;
+    /**
+     * Used to pass all properties of the HTMLDivElement to the overlay overlay inside the component.
+     */
+    overlayProps?: HTMLAttributes | undefined;
     /**
      * A valid query selector or an HTMLElement to specify where the overlay gets attached. Special keywords are 'body' for document body and 'self' for the element itself.
      * @defaultValue body
diff --git a/components/lib/cascadeselect/CascadeSelect.vue b/components/lib/cascadeselect/CascadeSelect.vue
index 07762eaf3..410872eab 100644
--- a/components/lib/cascadeselect/CascadeSelect.vue
+++ b/components/lib/cascadeselect/CascadeSelect.vue
@@ -30,7 +30,7 @@
                 {{ label }}
             </slot>
         </span>
-        <div :class="cx('dropdownButton')" role="button" tabindex="-1" aria-hidden="true" v-bind="ptm('dropdownButton')">
+        <div :class="cx('dropdown')" role="button" tabindex="-1" aria-hidden="true" v-bind="ptm('dropdown')">
             <slot v-if="loading" name="loadingicon" :class="cx('loadingIcon')">
                 <span v-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" aria-hidden="true" v-bind="ptm('loadingIcon')" />
                 <SpinnerIcon v-else :class="cx('loadingIcon')" spin aria-hidden="true" v-bind="ptm('loadingIcon')" />
@@ -44,8 +44,16 @@
         </span>
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @after-enter="onOverlayAfterEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')">
-                <div v-if="overlayVisible" :ref="overlayRef" :class="[cx('panel'), panelClass]" :style="panelStyle" @click="onOverlayClick" @keydown="onOverlayKeyDown" v-bind="{ ...panelProps, ...ptm('panel') }">
-                    <div :class="cx('wrapper')" v-bind="ptm('wrapper')">
+                <div
+                    v-if="overlayVisible"
+                    :ref="overlayRef"
+                    :class="[cx('overlay'), panelClass, overlayClass]"
+                    :style="[panelStyle, overlayStyle]"
+                    @click="onOverlayClick"
+                    @keydown="onOverlayKeyDown"
+                    v-bind="{ ...panelProps, ...overlayProps, ...ptm('overlay') }"
+                >
+                    <div :class="cx('listContainer')" v-bind="ptm('listContainer')">
                         <CascadeSelectSub
                             :id="id + '_tree'"
                             role="tree"
diff --git a/components/lib/cascadeselect/CascadeSelectSub.vue b/components/lib/cascadeselect/CascadeSelectSub.vue
index 21554cd7e..63368f1b6 100644
--- a/components/lib/cascadeselect/CascadeSelectSub.vue
+++ b/components/lib/cascadeselect/CascadeSelectSub.vue
@@ -1,5 +1,5 @@
 <template>
-    <ul :ref="containerRef" :class="cx('rootList')" v-bind="level === 0 ? ptm('list') : ptm('sublist')">
+    <ul :ref="containerRef" :class="cx('list')" v-bind="level === 0 ? ptm('list') : ptm('itemList')">
         <template v-for="(processedOption, index) of options" :key="getOptionLabelToRender(processedOption)">
             <li
                 :id="getOptionId(processedOption)"
@@ -17,9 +17,9 @@
                 :data-p-focus="isOptionFocused(processedOption)"
                 :data-p-disabled="isOptionDisabled(processedOption)"
             >
-                <div v-ripple :class="cx('content')" @click="onOptionClick($event, processedOption)" @mousemove="onOptionMouseMove($event, processedOption)" v-bind="getPTOptions(processedOption, index, 'content')">
+                <div v-ripple :class="cx('itemContent')" @click="onOptionClick($event, processedOption)" @mousemove="onOptionMouseMove($event, processedOption)" v-bind="getPTOptions(processedOption, index, 'itemContent')">
                     <component v-if="templates['option']" :is="templates['option']" :option="processedOption.option" />
-                    <span v-else :class="cx('text')" v-bind="getPTOptions(processedOption, index, 'text')">{{ getOptionLabelToRender(processedOption) }}</span>
+                    <span v-else :class="cx('itemText')" v-bind="getPTOptions(processedOption, index, 'itemText')">{{ getOptionLabelToRender(processedOption) }}</span>
                     <template v-if="isOptionGroup(processedOption)">
                         <component v-if="templates['optiongroupicon']" :is="templates['optiongroupicon']" aria-hidden="true" />
                         <span v-else-if="optionGroupIcon" :class="[cx('groupIcon'), optionGroupIcon]" aria-hidden="true" v-bind="getPTOptions(processedOption, index, 'groupIcon')" />
@@ -29,7 +29,7 @@
                 <CascadeSelectSub
                     v-if="isOptionGroup(processedOption) && isOptionActive(processedOption)"
                     role="group"
-                    :class="cx('sublist')"
+                    :class="cx('itemList')"
                     :selectId="selectId"
                     :focusedOptionId="focusedOptionId"
                     :options="getOptionGroupChildren(processedOption)"
diff --git a/components/lib/cascadeselect/style/CascadeSelectStyle.js b/components/lib/cascadeselect/style/CascadeSelectStyle.js
index d517f3c0b..48329953b 100644
--- a/components/lib/cascadeselect/style/CascadeSelectStyle.js
+++ b/components/lib/cascadeselect/style/CascadeSelectStyle.js
@@ -209,17 +209,17 @@ const classes = {
             'p-cascadeselect-label-empty': !instance.$slots['value'] && (instance.label === 'p-emptylabel' || instance.label.length === 0)
         }
     ],
-    dropdownButton: 'p-cascadeselect-dropdown',
+    dropdown: 'p-cascadeselect-dropdown',
     loadingIcon: 'p-cascadeselect-loading-icon',
     dropdownIcon: 'p-cascadeselect-dropdown-icon',
-    panel: ({ instance }) => [
+    overlay: ({ instance }) => [
         'p-cascadeselect-overlay p-component',
         {
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
-    wrapper: 'p-cascadeselect-list-container',
-    rootList: 'p-cascadeselect-list',
+    listContainer: 'p-cascadeselect-list-container',
+    list: 'p-cascadeselect-list',
     item: ({ instance, processedOption }) => [
         'p-cascadeselect-item',
         {
@@ -229,10 +229,10 @@ const classes = {
             'p-disabled': instance.isOptionDisabled(processedOption)
         }
     ],
-    content: 'p-cascadeselect-item-content',
-    text: 'p-cascadeselect-item-text',
+    itemContent: 'p-cascadeselect-item-content',
+    itemText: 'p-cascadeselect-item-text',
     groupIcon: 'p-cascadeselect-group-icon',
-    sublist: 'p-cascadeselect-overlay p-cascadeselect-item-list'
+    itemList: 'p-cascadeselect-overlay p-cascadeselect-item-list'
 };
 
 export default BaseStyle.extend({
diff --git a/components/lib/tree/Tree.d.ts b/components/lib/tree/Tree.d.ts
index 01eeb34d8..94f10f31f 100755
--- a/components/lib/tree/Tree.d.ts
+++ b/components/lib/tree/Tree.d.ts
@@ -112,35 +112,35 @@ export interface TreePassThroughOptions<T = any> {
      * Used to pass attributes to the input's DOM element.
      * @see {@link InputTextPassThroughOptions}
      */
-    input?: InputTextPassThroughOptions<TreeSharedPassThroughMethodOptions>;
+    filterInput?: InputTextPassThroughOptions<TreeSharedPassThroughMethodOptions>;
     /**
-     * Used to pass attributes to the search icon's DOM element.
+     * Used to pass attributes to the filter icon's DOM element.
      */
-    searchIcon?: TreePassThroughOptionType<T>;
+    filterIcon?: TreePassThroughOptionType<T>;
     /**
      * Used to pass attributes to the wrapper's DOM element.
      */
     wrapper?: TreePassThroughOptionType<T>;
     /**
-     * Used to pass attributes to the container's DOM element.
+     * Used to pass attributes to the root children's DOM element.
      */
-    container?: TreePassThroughOptionType<T>;
+    rootChildren?: TreePassThroughOptionType<T>;
     /**
      * Used to pass attributes to the node's DOM element.
      */
     node?: TreePassThroughOptionType<T>;
     /**
-     * Used to pass attributes to the content's DOM element.
+     * Used to pass attributes to the node content's DOM element.
      */
-    content?: TreePassThroughOptionType<T>;
+    nodeContent?: TreePassThroughOptionType<T>;
     /**
-     * Used to pass attributes to the toggler's DOM element.
+     * Used to pass attributes to the node toggle button's DOM element.
      */
-    toggler?: TreePassThroughOptionType<T>;
+    nodeToggleButton?: TreePassThroughOptionType<T>;
     /**
-     * Used to pass attributes to the toggler icon's DOM element.
+     * Used to pass attributes to the node toggle icon's DOM element.
      */
-    togglerIcon?: TreePassThroughOptionType<T>;
+    nodeToggleIcon?: TreePassThroughOptionType<T>;
     /**
      * Used to pass attributes to the checkbox's DOM element.
      */
@@ -150,17 +150,17 @@ export interface TreePassThroughOptions<T = any> {
      */
     nodeIcon?: TreePassThroughOptionType<T>;
     /**
-     * Used to pass attributes to the label's DOM element.
+     * Used to pass attributes to the node label's DOM element.
      */
-    label?: TreePassThroughOptionType<T>;
+    nodeLabel?: TreePassThroughOptionType<T>;
     /**
-     * Used to pass attributes to the subgroup's DOM element.
+     * Used to pass attributes to the node children's DOM element.
      */
-    subgroup?: TreePassThroughOptionType<T>;
+    nodeChildren?: TreePassThroughOptionType<T>;
     /**
-     * Used to pass attributes to the loading overlay's DOM element.
+     * Used to pass attributes to the mask's DOM element.
      */
-    loadingOverlay?: TreePassThroughOptionType<T>;
+    mask?: TreePassThroughOptionType<T>;
     /**
      * Used to pass attributes to the loading icon's DOM element.
      */
@@ -349,6 +349,7 @@ export interface TreeSlots {
         class: string;
     }): VNode[];
     /**
+     * @deprecated since v4.0. Use 'filtericon' slot instead.
      * Custom search icon template.
      * @param {Object} scope - searchicon slot's params.
      */
@@ -358,6 +359,16 @@ export interface TreeSlots {
          */
         class: string;
     }): VNode[];
+    /**
+     * Custom search icon template.
+     * @param {Object} scope - filtericon slot's params.
+     */
+    filtericon(scope: {
+        /**
+         * Style class of the icon.
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom toggler icon template.
      * @param {Object} scope - togglericon slot's params.
diff --git a/components/lib/tree/Tree.vue b/components/lib/tree/Tree.vue
index cd0ac805d..ded643870 100755
--- a/components/lib/tree/Tree.vue
+++ b/components/lib/tree/Tree.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="cx('root')" v-bind="ptmi('root')">
         <template v-if="loading && loadingMode === 'mask'">
-            <div :class="cx('loadingOverlay')" v-bind="ptm('loadingOverlay')">
+            <div :class="cx('mask')" v-bind="ptm('mask')">
                 <slot name="loadingicon" :class="cx('loadingIcon')">
                     <i v-if="loadingIcon" :class="[cx('loadingIcon'), 'pi-spin', loadingIcon]" v-bind="ptm('loadingIcon')" />
                     <SpinnerIcon v-else spin :class="cx('loadingIcon')" v-bind="ptm('loadingIcon')" />
@@ -9,13 +9,14 @@
             </div>
         </template>
         <div v-if="filter" :class="cx('filterContainer')" v-bind="ptm('filterContainer')">
-            <InputText v-model="filterValue" autocomplete="off" :class="cx('input')" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" v-bind="ptm('input')" />
-            <slot name="searchicon" :class="cx('searchIcon')">
-                <SearchIcon :class="cx('searchIcon')" v-bind="ptm('searchIcon')" />
+            <InputText v-model="filterValue" autocomplete="off" :class="cx('filterInput')" :placeholder="filterPlaceholder" @keydown="onFilterKeydown" v-bind="ptm('filterInput')" />
+            <!--TODO: searchicon deprecated since v4.0-->
+            <slot :name="$slots.searchicon ? 'searchicon' : 'filtericon'" :class="cx('filterIcon')">
+                <SearchIcon :class="cx('filterIcon')" v-bind="ptm('filterIcon')" />
             </slot>
         </div>
         <div :class="cx('wrapper')" :style="{ maxHeight: scrollHeight }" v-bind="ptm('wrapper')">
-            <ul :class="cx('container')" role="tree" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('container')">
+            <ul :class="cx('rootChildren')" role="tree" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" v-bind="ptm('rootChildren')">
                 <TreeNode
                     v-for="(node, index) of valueToRender"
                     :key="node.key"
diff --git a/components/lib/tree/TreeNode.vue b/components/lib/tree/TreeNode.vue
index 2a16c1a35..c7224fc93 100755
--- a/components/lib/tree/TreeNode.vue
+++ b/components/lib/tree/TreeNode.vue
@@ -12,18 +12,18 @@
         :aria-checked="ariaChecked"
         :tabindex="index === 0 ? 0 : -1"
         @keydown="onKeyDown"
-        v-bind="level === 1 ? getPTOptions('node') : ptm('subgroup')"
+        v-bind="level === 1 ? getPTOptions('node') : ptm('nodeChildren')"
     >
-        <div :class="cx('content')" @click="onClick" @touchend="onTouchEnd" :style="node.style" v-bind="getPTOptions('content')" :data-p-highlight="checkboxMode ? checked : selected" :data-p-selectable="selectable">
-            <button v-ripple type="button" :class="cx('toggler')" @click="toggle" tabindex="-1" aria-hidden="true" v-bind="getPTOptions('toggler')">
+        <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">
+            <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')" />
                     <SpinnerIcon v-else spin :class="cx('nodetogglericon')" v-bind="ptm('nodetogglericon')" />
                 </template>
                 <template v-else>
-                    <component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" :class="cx('togglerIcon')" />
-                    <component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('togglerIcon')" v-bind="getPTOptions('togglerIcon')" />
-                    <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('togglerIcon')" v-bind="getPTOptions('togglerIcon')" />
+                    <component v-if="templates['togglericon']" :is="templates['togglericon']" :node="node" :expanded="expanded" :class="cx('nodeToggleIcon')" />
+                    <component v-else-if="expanded" :is="node.expandedIcon ? 'span' : 'ChevronDownIcon'" :class="cx('nodeToggleIcon')" v-bind="getPTOptions('nodeToggleIcon')" />
+                    <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('nodeToggleIcon')" v-bind="getPTOptions('nodeToggleIcon')" />
                 </template>
             </button>
             <Checkbox v-if="checkboxMode" :modelValue="checked" :binary="true" :indeterminate="partialChecked" :class="cx('nodeCheckbox')" :tabindex="-1" :unstyled="unstyled" :pt="getPTOptions('nodeCheckbox')" :data-p-partialchecked="partialChecked">
@@ -33,12 +33,12 @@
             </Checkbox>
             <component v-if="templates['nodeicon']" :is="templates['nodeicon']" :node="node" :class="[cx('nodeIcon')]" v-bind="getPTOptions('nodeIcon')"></component>
             <span v-else :class="[cx('nodeIcon'), node.icon]" v-bind="getPTOptions('nodeIcon')"></span>
-            <span :class="cx('label')" v-bind="getPTOptions('label')" @keydown.stop>
+            <span :class="cx('nodeLabel')" v-bind="getPTOptions('nodeLabel')" @keydown.stop>
                 <component v-if="templates[node.type] || templates['default']" :is="templates[node.type] || templates['default']" :node="node" />
                 <template v-else>{{ label(node) }}</template>
             </span>
         </div>
-        <ul v-if="hasChildren && expanded" :class="cx('subgroup')" role="group" v-bind="ptm('subgroup')">
+        <ul v-if="hasChildren && expanded" :class="cx('nodeChildren')" role="group" v-bind="ptm('nodeChildren')">
             <TreeNode
                 v-for="childNode of node.children"
                 :key="childNode.key"
@@ -134,7 +134,7 @@ export default {
             });
         },
         onClick(event) {
-            if (this.toggleClicked || DomHandler.getAttribute(event.target, '[data-pc-section="toggler"]') || DomHandler.getAttribute(event.target.parentElement, '[data-pc-section="toggler"]')) {
+            if (this.toggleClicked || DomHandler.getAttribute(event.target, '[data-pc-section="nodetogglebutton"]') || DomHandler.getAttribute(event.target.parentElement, '[data-pc-section="nodetogglebutton"]')) {
                 this.toggleClicked = false;
 
                 return;
@@ -199,7 +199,7 @@ export default {
             }
         },
         onArrowDown(event) {
-            const nodeElement = event.target.getAttribute('data-pc-section') === 'toggler' ? event.target.closest('[role="treeitem"]') : event.target;
+            const nodeElement = event.target.getAttribute('data-pc-section') === 'nodetogglebutton' ? event.target.closest('[role="treeitem"]') : event.target;
             const listElement = nodeElement.children[1];
 
             if (listElement) {
@@ -244,7 +244,7 @@ export default {
             });
         },
         onArrowLeft(event) {
-            const togglerElement = DomHandler.findSingle(event.currentTarget, '[data-pc-section="toggler"]');
+            const togglerElement = DomHandler.findSingle(event.currentTarget, '[data-pc-section="nodetogglebutton"]');
 
             if (this.level === 0 && !this.expanded) {
                 return false;
@@ -272,7 +272,7 @@ export default {
             this.setAllNodesTabIndexes();
         },
         setAllNodesTabIndexes() {
-            const nodes = DomHandler.find(this.$refs.currentNode.closest('[data-pc-section="container"]'), '[role="treeitem"]');
+            const nodes = DomHandler.find(this.$refs.currentNode.closest('[data-pc-section="rootchildren"]'), '[role="treeitem"]');
 
             const hasSelectedNode = [...nodes].some((node) => node.getAttribute('aria-selected') === 'true' || node.getAttribute('aria-checked') === 'true');
 
diff --git a/components/lib/tree/style/TreeStyle.js b/components/lib/tree/style/TreeStyle.js
index c10154e6e..b9483d545 100644
--- a/components/lib/tree/style/TreeStyle.js
+++ b/components/lib/tree/style/TreeStyle.js
@@ -159,7 +159,7 @@ const theme = ({ dt }) => `
     height: 2rem;
 }
 
-.p-tree-mask {
+.p-tree .p-tree-mask {
     position: absolute;
     z-index: 1;
     display: flex;
@@ -188,15 +188,15 @@ const classes = {
             'p-tree-flex-scrollable': props.scrollHeight === 'flex'
         }
     ],
-    loadingOverlay: 'p-tree-mask p-component-overlay',
+    mask: 'p-tree-mask p-component-overlay',
     loadingIcon: 'p-tree-loading-icon',
     filterContainer: 'p-tree-filter-container',
-    input: 'p-tree-filter-input',
-    searchIcon: 'p-tree-filter-icon',
-    wrapper: 'p-tree-root',
-    container: 'p-tree-root-children',
+    filterInput: 'p-tree-filter-input',
+    filterIcon: 'p-tree-filter-icon',
+    wrapper: 'p-tree-root', //TODO: discuss
+    rootChildren: 'p-tree-root-children',
     node: ({ instance }) => ['p-tree-node', { 'p-tree-node-leaf': instance.leaf }],
-    content: ({ instance }) => [
+    nodeContent: ({ instance }) => [
         'p-tree-node-content',
         instance.node.styleClass,
         {
@@ -204,13 +204,13 @@ const classes = {
             'p-tree-node-selected': instance.checkboxMode && instance.$parentInstance.highlightOnSelect ? instance.checked : instance.selected
         }
     ],
-    toggler: 'p-tree-node-toggle-button',
-    togglerIcon: 'p-tree-node-toggle-icon',
-    nodeTogglerIcon: 'p-tree-node-toggler-icon', //todo: discuss
+    nodeToggleButton: 'p-tree-node-toggle-button',
+    nodeToggleIcon: 'p-tree-node-toggle-icon',
+    nodeTogglerIcon: 'p-tree-node-toggler-icon', //TODO: discuss
     nodeCheckbox: 'p-tree-node-checkbox',
     nodeIcon: 'p-tree-node-icon',
-    label: 'p-tree-node-label',
-    subgroup: 'p-tree-node-children'
+    nodeLabel: 'p-tree-node-label',
+    nodeChildren: 'p-tree-node-children'
 };
 
 export default BaseStyle.extend({
diff --git a/components/lib/treeselect/TreeSelect.d.ts b/components/lib/treeselect/TreeSelect.d.ts
index c52cc101c..c215ceb23 100644
--- a/components/lib/treeselect/TreeSelect.d.ts
+++ b/components/lib/treeselect/TreeSelect.d.ts
@@ -81,22 +81,22 @@ export interface TreeSelectPassThroughOptions {
      */
     label?: TreeSelectPassThroughOptionType;
     /**
-     * Used to pass attributes to the token's DOM element.
+     * Used to pass attributes to the chip's DOM element.
      */
-    token?: TreeSelectPassThroughOptionType;
+    chip?: TreeSelectPassThroughOptionType;
     /**
      * Used to pass attributes to the Chip.
      * @see {@link ChipPassThroughOptions}
      */
-    tokenLabel?: ChipPassThroughOptions<TreeSelectSharedPassThroughMethodOptions>;
+    chipLabel?: ChipPassThroughOptions<TreeSelectSharedPassThroughMethodOptions>;
     /**
-     * Used to pass attributes to the trigger's DOM element.
+     * Used to pass attributes to the dropdown's DOM element.
      */
-    trigger?: TreeSelectPassThroughOptionType;
+    dropdown?: TreeSelectPassThroughOptionType;
     /**
-     * Used to pass attributes to the trigger icon's DOM element.
+     * Used to pass attributes to the dropdown icon's DOM element.
      */
-    triggerIcon?: TreeSelectPassThroughOptionType;
+    dropdownIcon?: TreeSelectPassThroughOptionType;
     /**
      * Used to pass attributes to the panel's DOM element.
      */
@@ -325,13 +325,9 @@ export interface TreeSelectSlots {
      */
     empty(): VNode[];
     /**
+     * @deprecated since v4.0. use 'dropdownicon' slot instead.
      * Custom indicator template.
-     * @deprecated since v3.27.0. Use 'triggericon' slot.
-     */
-    indicator(): VNode[];
-    /**
-     * Custom indicator template.
-     * @param {Object} scope - triggericon slot's params.
+     * @param {Object} scope - dropdownicon slot's params.
      */
     triggericon(scope: {
         /**
@@ -339,6 +335,16 @@ export interface TreeSelectSlots {
          */
         class: string;
     }): VNode[];
+    /**
+     * Custom indicator template.
+     * @param {Object} scope - dropdownicon slot's params.
+     */
+    dropdownicon(scope: {
+        /**
+         * Style class of the icon.
+         */
+        class: string;
+    }): VNode[];
     /**
      * Custom item toggler icon template.
      * @param {Object} scope - item toggler icon slot's params.
diff --git a/components/lib/treeselect/TreeSelect.vue b/components/lib/treeselect/TreeSelect.vue
index 95fb9fb5c..cce64b126 100644
--- a/components/lib/treeselect/TreeSelect.vue
+++ b/components/lib/treeselect/TreeSelect.vue
@@ -29,17 +29,18 @@
                         {{ label || 'empty' }}
                     </template>
                     <template v-else-if="display === 'chip'">
-                        <div v-for="node of selectedNodes" :key="node.key" :class="cx('token')" v-bind="ptm('token')">
-                            <Chip :class="cx('tokenLabel')" :label="node.label" :unstyled="unstyled" :pt="ptm('tokenLabel')" />
+                        <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')" />
                         </div>
                         <template v-if="emptyValue">{{ placeholder || 'empty' }}</template>
                     </template>
                 </slot>
             </div>
         </div>
-        <div :class="cx('trigger')" role="button" aria-haspopup="tree" :aria-expanded="overlayVisible" v-bind="ptm('trigger')">
-            <slot name="triggericon" :class="cx('triggerIcon')">
-                <component :is="'ChevronDownIcon'" :class="cx('triggerIcon')" v-bind="ptm('triggerIcon')" />
+        <div :class="cx('dropdown')" role="button" aria-haspopup="tree" :aria-expanded="overlayVisible" v-bind="ptm('dropdown')">
+            <!-- TODO: triggericon is deprecated since v4.0 -->
+            <slot :name="$slots.triggericon ? 'triggericon' : 'dropdownicon'" :class="cx('dropdownIcon')">
+                <component :is="'ChevronDownIcon'" :class="cx('dropdownIcon')" v-bind="ptm('dropdownIcon')" />
             </slot>
         </div>
         <Portal :appendTo="appendTo">
diff --git a/components/lib/treeselect/style/TreeSelectStyle.js b/components/lib/treeselect/style/TreeSelectStyle.js
index 0c2418284..6cf37394f 100644
--- a/components/lib/treeselect/style/TreeSelectStyle.js
+++ b/components/lib/treeselect/style/TreeSelectStyle.js
@@ -140,10 +140,10 @@ const classes = {
             'p-treeselect-label-empty': !props.placeholder && instance.emptyValue
         }
     ],
-    token: 'p-treeselect-chip',
-    tokenLabel: 'p-treeselect-chip-label',
-    trigger: 'p-treeselect-dropdown',
-    triggerIcon: 'p-treeselect-dropdown-icon',
+    chip: 'p-treeselect-chip',
+    chipLabel: 'p-treeselect-chip-label',
+    dropdown: 'p-treeselect-dropdown',
+    dropdownIcon: 'p-treeselect-dropdown-icon',
     panel: ({ instance }) => [
         'p-treeselect-overlay p-component',
         {