diff --git a/components/lib/colorpicker/ColorPicker.d.ts b/components/lib/colorpicker/ColorPicker.d.ts
index 54095d674..1b1391326 100755
--- a/components/lib/colorpicker/ColorPicker.d.ts
+++ b/components/lib/colorpicker/ColorPicker.d.ts
@@ -71,9 +71,9 @@ export interface ColorPickerPassThroughOptions {
      */
     root?: ColorPickerPassThroughOptionType;
     /**
-     * Used to pass attributes to the input's DOM element.
+     * Used to pass attributes to the preview's DOM element.
      */
-    input?: ColorPickerPassThroughOptionType;
+    preview?: ColorPickerPassThroughOptionType;
     /**
      * Used to pass attributes to the panel's DOM element.
      */
@@ -83,13 +83,13 @@ export interface ColorPickerPassThroughOptions {
      */
     content?: ColorPickerPassThroughOptionType;
     /**
-     * Used to pass attributes to the selector's DOM element.
+     * Used to pass attributes to the color selector's DOM element.
      */
-    selector?: ColorPickerPassThroughOptionType;
+    colorSelector?: ColorPickerPassThroughOptionType;
     /**
-     * Used to pass attributes to the color's DOM element.
+     * Used to pass attributes to the color background's DOM element.
      */
-    color?: ColorPickerPassThroughOptionType;
+    colorBackground?: ColorPickerPassThroughOptionType;
     /**
      * Used to pass attributes to the color handler's DOM element.
      */
diff --git a/components/lib/colorpicker/ColorPicker.vue b/components/lib/colorpicker/ColorPicker.vue
index 534dfbf9c..977bded98 100755
--- a/components/lib/colorpicker/ColorPicker.vue
+++ b/components/lib/colorpicker/ColorPicker.vue
@@ -1,12 +1,12 @@
 <template>
     <div ref="container" :class="cx('root')" v-bind="ptmi('root')">
-        <input v-if="!inline" ref="input" type="text" :class="cx('input')" readonly="readonly" :tabindex="tabindex" :disabled="disabled" @click="onInputClick" @keydown="onInputKeydown" v-bind="ptm('input')" />
+        <input v-if="!inline" ref="input" type="text" :class="cx('preview')" readonly="readonly" :tabindex="tabindex" :disabled="disabled" @click="onInputClick" @keydown="onInputKeydown" v-bind="ptm('preview')" />
         <Portal :appendTo="appendTo" :disabled="inline">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave" v-bind="ptm('transition')">
                 <div v-if="inline ? true : overlayVisible" :ref="pickerRef" :class="[cx('panel'), panelClass]" @click="onOverlayClick" v-bind="ptm('panel')">
                     <div :class="cx('content')" v-bind="ptm('content')">
-                        <div :ref="colorSelectorRef" :class="cx('selector')" @mousedown="onColorMousedown($event)" @touchstart="onColorDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()" v-bind="ptm('selector')">
-                            <div :class="cx('color')" v-bind="ptm('color')">
+                        <div :ref="colorSelectorRef" :class="cx('colorSelector')" @mousedown="onColorMousedown($event)" @touchstart="onColorDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd()" v-bind="ptm('colorSelector')">
+                            <div :class="cx('colorBackground')" v-bind="ptm('colorBackground')">
                                 <div :ref="colorHandleRef" :class="cx('colorHandle')" v-bind="ptm('colorHandle')"></div>
                             </div>
                         </div>
diff --git a/components/lib/colorpicker/style/ColorPickerStyle.js b/components/lib/colorpicker/style/ColorPickerStyle.js
index f0d0ba706..2038ab381 100644
--- a/components/lib/colorpicker/style/ColorPickerStyle.js
+++ b/components/lib/colorpicker/style/ColorPickerStyle.js
@@ -111,7 +111,7 @@ const theme = ({ dt }) => `
 
 const classes = {
     root: 'p-colorpicker p-component',
-    input: ({ props }) => ['p-colorpicker-preview', { 'p-disabled': props.disabled }],
+    preview: ({ props }) => ['p-colorpicker-preview', { 'p-disabled': props.disabled }],
     panel: ({ instance, props }) => [
         'p-colorpicker-panel',
         {
@@ -120,8 +120,8 @@ const classes = {
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
-    selector: 'p-colorpicker-color-selector',
-    color: 'p-colorpicker-color-background',
+    colorSelector: 'p-colorpicker-color-selector',
+    colorBackground: 'p-colorpicker-color-background',
     colorHandle: 'p-colorpicker-color-handle',
     hue: 'p-colorpicker-hue',
     hueHandle: 'p-colorpicker-hue-handle'
diff --git a/components/lib/knob/Knob.d.ts b/components/lib/knob/Knob.d.ts
index 7d8851159..b30d66a79 100644
--- a/components/lib/knob/Knob.d.ts
+++ b/components/lib/knob/Knob.d.ts
@@ -65,9 +65,9 @@ export interface KnobPassThroughOptions {
      */
     value?: KnobPassThroughOptionType;
     /**
-     * Used to pass attributes to the label's DOM element.
+     * Used to pass attributes to the text's DOM element.
      */
-    label?: KnobPassThroughOptionType;
+    text?: KnobPassThroughOptionType;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
diff --git a/components/lib/knob/Knob.vue b/components/lib/knob/Knob.vue
index 21cbdea99..257fa784c 100644
--- a/components/lib/knob/Knob.vue
+++ b/components/lib/knob/Knob.vue
@@ -21,7 +21,7 @@
         >
             <path :d="rangePath" :stroke-width="strokeWidth" :stroke="rangeColor" :class="cx('range')" v-bind="ptm('range')"></path>
             <path :d="valuePath" :stroke-width="strokeWidth" :stroke="valueColor" :class="cx('value')" v-bind="ptm('value')"></path>
-            <text v-if="showValue" :x="50" :y="57" text-anchor="middle" :fill="textColor" :class="cx('label')" v-bind="ptm('label')">{{ valueToDisplay }}</text>
+            <text v-if="showValue" :x="50" :y="57" text-anchor="middle" :fill="textColor" :class="cx('text')" v-bind="ptm('text')">{{ valueToDisplay }}</text>
         </svg>
     </div>
 </template>
diff --git a/components/lib/knob/style/KnobStyle.js b/components/lib/knob/style/KnobStyle.js
index f3379ff2b..fbf07afa2 100644
--- a/components/lib/knob/style/KnobStyle.js
+++ b/components/lib/knob/style/KnobStyle.js
@@ -38,7 +38,7 @@ const classes = {
     root: ({ props }) => ['p-knob p-component', { 'p-disabled': props.disabled }],
     range: 'p-knob-range',
     value: 'p-knob-value',
-    label: 'p-knob-text'
+    text: 'p-knob-text'
 };
 
 export default BaseStyle.extend({
diff --git a/components/lib/rating/Rating.d.ts b/components/lib/rating/Rating.d.ts
index 11837be10..e8c3c4549 100755
--- a/components/lib/rating/Rating.d.ts
+++ b/components/lib/rating/Rating.d.ts
@@ -58,9 +58,9 @@ export interface RatingPassThroughOptions {
      */
     root?: RatingPassThroughOptionType;
     /**
-     * Used to pass attributes to the item's DOM element.
+     * Used to pass attributes to the option's DOM element.
      */
-    item?: RatingPassThroughOptionType;
+    option?: RatingPassThroughOptionType;
     /**
      * Used to pass attributes to the on icon's DOM element.
      */
@@ -70,13 +70,13 @@ export interface RatingPassThroughOptions {
      */
     offIcon?: RatingPassThroughOptionType;
     /**
-     * Used to pass attributes to the hidden item input wrapper's DOM element.
+     * Used to pass attributes to the hidden option input wrapper's DOM element.
      */
-    hiddenItemInputWrapper?: RatingPassThroughOptionType;
+    hiddenOptionInputWrapper?: RatingPassThroughOptionType;
     /**
-     * Used to pass attributes to the hidden item input's DOM element.
+     * Used to pass attributes to the hidden option input's DOM element.
      */
-    hiddenItemInput?: RatingPassThroughOptionType;
+    hiddenOptionInput?: RatingPassThroughOptionType;
     /**
      * Used to manage all lifecycle hooks.
      * @see {@link BaseComponent.ComponentHooks}
@@ -110,12 +110,12 @@ export interface RatingState {
  */
 export interface RatingContext {
     /**
-     * Current active state of the item as a boolean.
+     * Current active state of the option as a boolean.
      * @defaultValue false
      */
     active: boolean;
     /**
-     * Current focused state of item as a boolean.
+     * Current focused state of option as a boolean.
      * @defaultValue false
      */
     focused: boolean;
@@ -204,7 +204,7 @@ export interface RatingSlots {
      */
     onicon(scope: {
         /**
-         * Item value
+         * Option value
          */
         value: number;
         /**
@@ -218,7 +218,7 @@ export interface RatingSlots {
      */
     officon(scope: {
         /**
-         * Item value
+         * Option value
          */
         value: number;
         /**
diff --git a/components/lib/rating/Rating.vue b/components/lib/rating/Rating.vue
index 887b9df52..476c6fcc4 100755
--- a/components/lib/rating/Rating.vue
+++ b/components/lib/rating/Rating.vue
@@ -1,8 +1,8 @@
 <template>
     <div :class="cx('root')" v-bind="ptmi('root')">
         <template v-for="value in stars" :key="value">
-            <div :class="cx('item', { value })" @click="onOptionClick($event, value)" v-bind="getPTOptions('item', value)" :data-p-active="value <= modelValue" :data-p-focused="value === focusedOptionIndex">
-                <span class="p-hidden-accessible" v-bind="ptm('hiddenItemInputWrapper')" :data-p-hidden-accessible="true">
+            <div :class="cx('option', { value })" @click="onOptionClick($event, value)" v-bind="getPTOptions('option', value)" :data-p-active="value <= modelValue" :data-p-focused="value === focusedOptionIndex">
+                <span class="p-hidden-accessible" v-bind="ptm('hiddenOptionInputWrapper')" :data-p-hidden-accessible="true">
                     <input
                         type="radio"
                         :value="value"
@@ -14,7 +14,7 @@
                         @focus="onFocus($event, value)"
                         @blur="onBlur"
                         @change="onChange($event, value)"
-                        v-bind="ptm('hiddenItemInput')"
+                        v-bind="ptm('hiddenOptionInput')"
                     />
                 </span>
                 <slot v-if="value <= modelValue" name="onicon" :value="value" :class="cx('onIcon')">
diff --git a/components/lib/rating/style/RatingStyle.js b/components/lib/rating/style/RatingStyle.js
index 2809a241d..9086d6095 100644
--- a/components/lib/rating/style/RatingStyle.js
+++ b/components/lib/rating/style/RatingStyle.js
@@ -47,7 +47,7 @@ const classes = {
             'p-disabled': props.disabled
         }
     ],
-    item: ({ instance, props, value }) => [
+    option: ({ instance, props, value }) => [
         'p-rating-option',
         {
             'p-rating-option-active': value <= props.modelValue,