diff --git a/components/lib/timeline/Timeline.spec.js b/components/lib/timeline/Timeline.spec.js
index 8535db71e..d8e99679b 100644
--- a/components/lib/timeline/Timeline.spec.js
+++ b/components/lib/timeline/Timeline.spec.js
@@ -57,7 +57,7 @@ describe('customized timeline', () => {
                 `,
                 marker: `
                     <template #marker="slotProps">
-                        <span class="custom-marker shadow-2" :style="{backgroundColor: slotProps.item.color}">
+                        <span class="custom-marker" :style="{backgroundColor: slotProps.item.color}">
                             <i :class="slotProps.item.icon"></i>
                         </span>
                     </template>
diff --git a/doc/carousel/BasicDoc.vue b/doc/carousel/BasicDoc.vue
index 74c3541c1..64a07f81c 100644
--- a/doc/carousel/BasicDoc.vue
+++ b/doc/carousel/BasicDoc.vue
@@ -9,7 +9,7 @@
                 <div class="border-1 surface-border border-round m-2 p-3">
                     <div class="mb-3">
                         <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
                             <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
                         </div>
                     </div>
@@ -64,7 +64,7 @@ export default {
         <div class="border-1 surface-border border-round m-2  p-3">
             <div class="mb-3">
                 <div class="relative mx-auto">
-                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
+                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
                     <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                 </div>
             </div>
@@ -88,7 +88,7 @@ export default {
                 <div class="border-1 surface-border border-round m-2  p-3">
                     <div class="mb-3">
                         <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
                             <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
@@ -168,7 +168,7 @@ export default {
                 <div class="border-1 surface-border border-round m-2  p-3">
                     <div class="mb-3">
                         <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
                             <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
diff --git a/doc/carousel/CircularDoc.vue b/doc/carousel/CircularDoc.vue
index b6a1a0f04..f0ceecb8f 100644
--- a/doc/carousel/CircularDoc.vue
+++ b/doc/carousel/CircularDoc.vue
@@ -9,7 +9,7 @@
                 <div class="border-1 surface-border border-round m-2 p-3">
                     <div class="mb-3">
                         <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
                             <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
                         </div>
                     </div>
@@ -64,7 +64,7 @@ export default {
         <div class="border-1 surface-border border-round m-2  p-3">
             <div class="mb-3">
                 <div class="relative mx-auto">
-                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
+                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
                     <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                 </div>
             </div>
@@ -88,7 +88,7 @@ export default {
                 <div class="border-1 surface-border border-round m-2  p-3">
                     <div class="mb-3">
                         <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
                             <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
@@ -168,7 +168,7 @@ export default {
                 <div class="border-1 surface-border border-round m-2  p-3">
                     <div class="mb-3">
                         <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
                             <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
diff --git a/doc/carousel/ResponsiveDoc.vue b/doc/carousel/ResponsiveDoc.vue
index a4b316386..bebf7e7f7 100644
--- a/doc/carousel/ResponsiveDoc.vue
+++ b/doc/carousel/ResponsiveDoc.vue
@@ -12,7 +12,7 @@
                 <div class="border-1 surface-border border-round m-2 p-3">
                     <div class="mb-3">
                         <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
                             <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
                         </div>
                     </div>
@@ -67,7 +67,7 @@ export default {
         <div class="border-1 surface-border border-round m-2  p-3">
             <div class="mb-3">
                 <div class="relative mx-auto">
-                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
+                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
                     <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                 </div>
             </div>
@@ -91,7 +91,7 @@ export default {
                 <div class="border-1 surface-border border-round m-2  p-3">
                     <div class="mb-3">
                         <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
                             <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
@@ -171,7 +171,7 @@ export default {
                 <div class="border-1 surface-border border-round m-2  p-3">
                     <div class="mb-3">
                         <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
                             <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
diff --git a/doc/carousel/VerticalDoc.vue b/doc/carousel/VerticalDoc.vue
index ac5412072..ac03a936d 100644
--- a/doc/carousel/VerticalDoc.vue
+++ b/doc/carousel/VerticalDoc.vue
@@ -9,7 +9,7 @@
                 <div class="border-1 surface-border border-round m-2 p-3">
                     <div class="mb-3">
                         <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
                             <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left: 5px; top: 5px" />
                         </div>
                     </div>
@@ -42,7 +42,7 @@ export default {
         <div class="border-1 surface-border border-round m-2  p-3">
             <div class="mb-3">
                 <div class="relative mx-auto">
-                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
+                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
                     <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                 </div>
             </div>
@@ -66,7 +66,7 @@ export default {
                 <div class="border-1 surface-border border-round m-2  p-3">
                     <div class="mb-3">
                         <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
                             <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
@@ -124,7 +124,7 @@ export default {
                 <div class="border-1 surface-border border-round m-2  p-3">
                     <div class="mb-3">
                         <div class="relative mx-auto">
-                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full shadow-2 border-round" />
+                            <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-full border-round" />
                             <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
diff --git a/doc/carousel/pt/PTDoc.vue b/doc/carousel/pt/PTDoc.vue
index cf7ebf56f..982634c22 100644
--- a/doc/carousel/pt/PTDoc.vue
+++ b/doc/carousel/pt/PTDoc.vue
@@ -13,7 +13,7 @@
             <template #item="slotProps">
                 <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
                     <div class="mb-3">
-                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
+                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6" />
                     </div>
                     <div>
                         <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@@ -74,7 +74,7 @@ export default {
     <template #item="slotProps">
         <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
             <div class="mb-3">
-                <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
+                <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6" />
             </div>
             <div>
                 <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@@ -104,7 +104,7 @@ export default {
             <template #item="slotProps">
                 <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
                     <div class="mb-3">
-                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
+                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6" />
                     </div>
                     <div>
                         <h4 class="mb-1">{{ slotProps.data.name }}</h4>
@@ -190,7 +190,7 @@ export default {
             <template #item="slotProps">
                 <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
                     <div class="mb-3">
-                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6 shadow-2" />
+                        <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-6" />
                     </div>
                     <div>
                         <h4 class="mb-1">{{ slotProps.data.name }}</h4>
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 1f47cec77..e7139bfb3 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -23735,6 +23735,14 @@
                             "default": "",
                             "description": "Used to pass attributes to the item group's DOM element."
                         },
+                        {
+                            "name": "itemGroupLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "DropdownPassThroughOptionType<T>",
+                            "default": "",
+                            "description": "Used to pass attributes to the item group label's DOM element."
+                        },
                         {
                             "name": "item",
                             "optional": true,
@@ -24260,7 +24268,7 @@
                             "readonly": false,
                             "type": "boolean",
                             "default": "false",
-                            "description": "Highlights automatically the first item."
+                            "description": "Whether the selected option will be add highlight class."
                         },
                         {
                             "name": "showTick",
diff --git a/doc/contextmenu/TemplateDoc.vue b/doc/contextmenu/TemplateDoc.vue
index d151e2c55..a8229831d 100644
--- a/doc/contextmenu/TemplateDoc.vue
+++ b/doc/contextmenu/TemplateDoc.vue
@@ -11,7 +11,7 @@
                 @contextmenu="onRightClick($event, product.id)"
             >
                 <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
+                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
                     <div class="flex-1 flex flex-column gap-1">
                         <span class="font-bold">{{ product.name }}</span>
                         <div class="flex align-items-center gap-2">
@@ -30,7 +30,7 @@
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
                     <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="item.items" class="pi pi-angle-right ml-auto text-primary"></i>
+                    <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
                 </a>
             </template>
         </ContextMenu>
@@ -87,7 +87,7 @@ export default {
         @contextmenu="onRightClick($event, product.id)"
     >
         <div class="flex flex-wrap p-2 align-items-center gap-3">
-            <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'/images/product/' + product.image" :alt="product.name" />
+            <img class="w-4rem flex-shrink-0 border-round" :src="'/images/product/' + product.image" :alt="product.name" />
             <div class="flex-1 flex flex-column gap-1">
                 <span class="font-bold">{{ product.name }}</span>
                 <div class="flex align-items-center gap-2">
@@ -106,7 +106,7 @@ export default {
             <span class="ml-2">{{ item.label }}</span>
             <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
             <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
-            <i v-if="item.items" class="pi pi-angle-right ml-auto text-primary"></i>
+            <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
         </a>
     </template>
 </ContextMenu>
@@ -122,7 +122,7 @@ export default {
                 @contextmenu="onRightClick($event, product.id)"
             >
                 <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
+                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
                     <div class="flex-1 flex flex-column gap-1">
                         <span class="font-bold">{{ product.name }}</span>
                         <div class="flex align-items-center gap-2">
@@ -141,7 +141,7 @@ export default {
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
                     <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="item.items" class="pi pi-angle-right ml-auto text-primary"></i>
+                    <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
                 </a>
             </template>
         </ContextMenu>
@@ -212,7 +212,7 @@ export default {
                 @contextmenu="onRightClick($event, product.id)"
             >
                 <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
+                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
                     <div class="flex-1 flex flex-column gap-1">
                         <span class="font-bold">{{ product.name }}</span>
                         <div class="flex align-items-center gap-2">
@@ -231,7 +231,7 @@ export default {
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
                     <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="item.items" class="pi pi-angle-right ml-auto text-primary"></i>
+                    <i v-if="item.items" class="pi pi-angle-right ml-auto"></i>
                 </a>
             </template>
         </ContextMenu>
diff --git a/doc/datatable/TemplateDoc.vue b/doc/datatable/TemplateDoc.vue
index 94ab4c505..69c9eb76b 100644
--- a/doc/datatable/TemplateDoc.vue
+++ b/doc/datatable/TemplateDoc.vue
@@ -14,7 +14,7 @@
                 <Column field="name" header="Name"></Column>
                 <Column header="Image">
                     <template #body="slotProps">
-                        <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="w-6rem shadow-2 border-round" />
+                        <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="w-6rem border-round" />
                     </template>
                 </Column>
                 <Column field="price" header="Price">
@@ -59,7 +59,7 @@ export default {
     <Column field="name" header="Name"></Column>
     <Column header="Image">
         <template #body="slotProps">
-            <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-6rem shadow-2 border-round" />
+            <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-6rem border-round" />
         </template>
     </Column>
     <Column field="price" header="Price">
@@ -94,7 +94,7 @@ export default {
             <Column field="name" header="Name"></Column>
             <Column header="Image">
                 <template #body="slotProps">
-                    <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-6rem shadow-2 border-round" />
+                    <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-6rem border-round" />
                 </template>
             </Column>
             <Column field="price" header="Price">
@@ -166,7 +166,7 @@ export default {
             <Column field="name" header="Name"></Column>
             <Column header="Image">
                 <template #body="slotProps">
-                    <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-6rem shadow-2 border-round" />
+                    <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="w-6rem border-round" />
                 </template>
             </Column>
             <Column field="price" header="Price">
diff --git a/doc/datatable/samples/ProductsDoc.vue b/doc/datatable/samples/ProductsDoc.vue
index 549e496cc..bd4b44cf8 100644
--- a/doc/datatable/samples/ProductsDoc.vue
+++ b/doc/datatable/samples/ProductsDoc.vue
@@ -43,7 +43,7 @@
                 <Column field="name" header="Name" sortable style="min-width: 16rem"></Column>
                 <Column header="Image">
                     <template #body="slotProps">
-                        <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="shadow-2 border-round" style="width: 64px" />
+                        <img :src="`https://primefaces.org/cdn/primevue/images/product/${slotProps.data.image}`" :alt="slotProps.data.image" class="border-round" style="width: 64px" />
                     </template>
                 </Column>
                 <Column field="price" header="Price" sortable style="min-width: 8rem">
@@ -217,7 +217,7 @@ export default {
     <Column field="name" header="Name" sortable style="min-width:16rem"></Column>
     <Column header="Image">
         <template #body="slotProps">
-            <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="shadow-2 border-round" style="width: 64px" />
+            <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="border-round" style="width: 64px" />
         </template>
     </Column>
     <Column field="price" header="Price" sortable style="min-width:8rem">
@@ -279,7 +279,7 @@ export default {
                 <Column field="name" header="Name" sortable style="min-width:16rem"></Column>
                 <Column header="Image">
                     <template #body="slotProps">
-                        <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="shadow-2 border-round" style="width: 64px" />
+                        <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="border-round" style="width: 64px" />
                     </template>
                 </Column>
                 <Column field="price" header="Price" sortable style="min-width:8rem">
@@ -568,7 +568,7 @@ export default {
                 <Column field="name" header="Name" sortable style="min-width:16rem"></Column>
                 <Column header="Image">
                     <template #body="slotProps">
-                        <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="shadow-2 border-round" style="width: 64px" />
+                        <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${slotProps.data.image}\`" :alt="slotProps.data.image" class="border-round" style="width: 64px" />
                     </template>
                 </Column>
                 <Column field="price" header="Price" sortable style="min-width:8rem">
diff --git a/doc/dataview/BasicDoc.vue b/doc/dataview/BasicDoc.vue
index 01f3518a9..5de3083e1 100644
--- a/doc/dataview/BasicDoc.vue
+++ b/doc/dataview/BasicDoc.vue
@@ -9,7 +9,7 @@
                     <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
                         <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
                             <div class="md:w-10rem relative">
-                                <img class="shadow-2 block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
+                                <img class="block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                             </div>
                             <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@@ -57,7 +57,7 @@ export default {
             <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
                 <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
                     <div class="md:w-10rem relative">
-                        <img class="shadow-2 block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                        <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                         <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                     </div>
                     <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@@ -96,7 +96,7 @@ export default {
                     <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
                         <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
                             <div class="md:w-10rem relative">
-                                <img class="shadow-2 block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                                <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                             </div>
                             <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@@ -169,7 +169,7 @@ export default {
                     <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
                         <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
                             <div class="md:w-10rem relative">
-                                <img class="shadow-2 block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                                <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                             </div>
                             <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
diff --git a/doc/dataview/LayoutDoc.vue b/doc/dataview/LayoutDoc.vue
index e3b39fcbc..feea4dc18 100644
--- a/doc/dataview/LayoutDoc.vue
+++ b/doc/dataview/LayoutDoc.vue
@@ -18,7 +18,7 @@
                     <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
                         <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
                             <div class="md:w-10rem relative">
-                                <img class="shadow-2 block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
+                                <img class="block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                             </div>
                             <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@@ -53,7 +53,7 @@
                         <div class="p-4 border-1 surface-border surface-card border-round flex flex-column">
                             <div class="surface-50 flex justify-content-center border-round p-3">
                                 <div class="relative mx-auto">
-                                    <img class="shadow-2 border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" style="max-width: 300px" />
+                                    <img class="border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" style="max-width: 300px" />
                                     <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                                 </div>
                             </div>
@@ -109,7 +109,7 @@ export default {
             <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
                 <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
                     <div class="md:w-10rem relative">
-                        <img class="shadow-2 block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                        <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                         <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                     </div>
                     <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@@ -144,7 +144,7 @@ export default {
                 <div class="p-4 border-1 surface-border surface-card border-round flex flex-column">
                     <div class="surface-50 flex justify-content-center border-round p-3">
                         <div class="relative mx-auto">
-                            <img class="shadow-2 border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" style="max-width: 300px"/>
+                            <img class="border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" style="max-width: 300px"/>
                             <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                         </div>
                     </div>
@@ -190,7 +190,7 @@ export default {
                     <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
                         <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
                             <div class="md:w-10rem relative">
-                                <img class="shadow-2 block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                                <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                             </div>
                             <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@@ -225,7 +225,7 @@ export default {
                         <div class="p-4 border-1 surface-border surface-card border-round flex flex-column">
                             <div class="surface-50 flex justify-content-center border-round p-3">
                                 <div class="relative mx-auto">
-                                    <img class="shadow-2 border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" style="max-width: 300px"/>
+                                    <img class="border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" style="max-width: 300px"/>
                                     <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                                 </div>
                             </div>
@@ -306,7 +306,7 @@ export default {
                     <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
                         <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
                             <div class="md:w-10rem relative">
-                                <img class="shadow-2 block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                                <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                             </div>
                             <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@@ -341,7 +341,7 @@ export default {
                         <div class="p-4 border-1 surface-border surface-card border-round flex flex-column">
                             <div class="surface-50 flex justify-content-center border-round p-3">
                                 <div class="relative mx-auto">
-                                    <img class="shadow-2 border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" style="max-width: 300px"/>
+                                    <img class="border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" style="max-width: 300px"/>
                                     <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                                 </div>
                             </div>
diff --git a/doc/dataview/LoadingDoc.vue b/doc/dataview/LoadingDoc.vue
index c4d427237..b452ec8af 100644
--- a/doc/dataview/LoadingDoc.vue
+++ b/doc/dataview/LoadingDoc.vue
@@ -14,7 +14,7 @@
                 <div class="grid grid-nogutter">
                     <div v-for="i in 6" :key="i" class="col-12">
                         <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': i !== 0 }">
-                            <Skeleton class="w-9 sm:w-16rem xl:w-10rem shadow-2 h-6rem block xl:block mx-auto border-round" />
+                            <Skeleton class="w-9 sm:w-16rem xl:w-10rem h-6rem block xl:block mx-auto border-round" />
                             <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                                 <div class="flex flex-column align-items-center sm:align-items-start gap-3">
                                     <Skeleton class="w-8rem border-round h-2rem" />
@@ -43,7 +43,7 @@
                                 <Skeleton class="w-3rem border-round h-1rem" />
                             </div>
                             <div class="flex flex-column align-items-center gap-3 py-5">
-                                <Skeleton class="w-9 shadow-2 border-round h-10rem" />
+                                <Skeleton class="w-9 border-round h-10rem" />
                                 <Skeleton class="w-8rem border-round h-2rem" />
                                 <Skeleton class="w-6rem border-round h-1rem" />
                             </div>
@@ -81,7 +81,7 @@ export default {
         <div class="grid grid-nogutter">
             <div v-for="i in 6" :key="i" class="col-12">
                 <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': i !== 0 }">
-                    <Skeleton class="w-9 sm:w-16rem xl:w-10rem shadow-2 h-6rem block xl:block mx-auto border-round" />
+                    <Skeleton class="w-9 sm:w-16rem xl:w-10rem h-6rem block xl:block mx-auto border-round" />
                     <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div class="flex flex-column align-items-center sm:align-items-start gap-3">
                             <Skeleton class="w-8rem border-round h-2rem" />
@@ -110,7 +110,7 @@ export default {
                         <Skeleton class="w-3rem border-round h-1rem" />
                     </div>
                     <div class="flex flex-column align-items-center gap-3 py-5">
-                        <Skeleton class="w-9 shadow-2 border-round h-10rem" />
+                        <Skeleton class="w-9 border-round h-10rem" />
                         <Skeleton class="w-8rem border-round h-2rem" />
                         <Skeleton class="w-6rem border-round h-1rem" />
                     </div>
@@ -138,7 +138,7 @@ export default {
                 <div class="grid grid-nogutter">
                     <div v-for="i in 6" :key="i" class="col-12">
                         <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': i !== 0 }">
-                            <Skeleton class="w-9 sm:w-16rem xl:w-10rem shadow-2 h-6rem block xl:block mx-auto border-round" />
+                            <Skeleton class="w-9 sm:w-16rem xl:w-10rem h-6rem block xl:block mx-auto border-round" />
                             <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                                 <div class="flex flex-column align-items-center sm:align-items-start gap-3">
                                     <Skeleton class="w-8rem border-round h-2rem" />
@@ -167,7 +167,7 @@ export default {
                                 <Skeleton class="w-3rem border-round h-1rem" />
                             </div>
                             <div class="flex flex-column align-items-center gap-3 py-5">
-                                <Skeleton class="w-9 shadow-2 border-round h-10rem" />
+                                <Skeleton class="w-9 border-round h-10rem" />
                                 <Skeleton class="w-8rem border-round h-2rem" />
                                 <Skeleton class="w-6rem border-round h-1rem" />
                             </div>
@@ -230,7 +230,7 @@ export default {
                 <div class="grid grid-nogutter">
                     <div v-for="i in 6" :key="i" class="col-12">
                         <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': i !== 0 }">
-                            <Skeleton class="w-9 sm:w-16rem xl:w-10rem shadow-2 h-6rem block xl:block mx-auto border-round" />
+                            <Skeleton class="w-9 sm:w-16rem xl:w-10rem h-6rem block xl:block mx-auto border-round" />
                             <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                                 <div class="flex flex-column align-items-center sm:align-items-start gap-3">
                                     <Skeleton class="w-8rem border-round h-2rem" />
@@ -259,7 +259,7 @@ export default {
                                 <Skeleton class="w-3rem border-round h-1rem" />
                             </div>
                             <div class="flex flex-column align-items-center gap-3 py-5">
-                                <Skeleton class="w-9 shadow-2 border-round h-10rem" />
+                                <Skeleton class="w-9 border-round h-10rem" />
                                 <Skeleton class="w-8rem border-round h-2rem" />
                                 <Skeleton class="w-6rem border-round h-1rem" />
                             </div>
diff --git a/doc/dataview/PaginationDoc.vue b/doc/dataview/PaginationDoc.vue
index 448889842..d1456ae7c 100644
--- a/doc/dataview/PaginationDoc.vue
+++ b/doc/dataview/PaginationDoc.vue
@@ -9,7 +9,7 @@
                     <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
                         <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
                             <div class="md:w-10rem relative">
-                                <img class="shadow-2 block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
+                                <img class="block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                             </div>
                             <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@@ -57,7 +57,7 @@ export default {
             <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
                 <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
                     <div class="md:w-10rem relative">
-                        <img class="shadow-2 block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                        <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                         <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                     </div>
                     <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@@ -96,7 +96,7 @@ export default {
                     <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
                         <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
                             <div class="md:w-10rem relative">
-                                <img class="shadow-2 block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                                <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                             </div>
                             <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@@ -169,7 +169,7 @@ export default {
                     <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
                         <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
                             <div class="md:w-10rem relative">
-                                <img class="shadow-2 block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                                <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                             </div>
                             <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
diff --git a/doc/dataview/SortingDoc.vue b/doc/dataview/SortingDoc.vue
index ed342dc24..626b21c39 100644
--- a/doc/dataview/SortingDoc.vue
+++ b/doc/dataview/SortingDoc.vue
@@ -12,7 +12,7 @@
                     <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
                         <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
                             <div class="md:w-10rem relative">
-                                <img class="shadow-2 block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
+                                <img class="block xl:block mx-auto border-round w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                             </div>
                             <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@@ -70,7 +70,7 @@ export default {
             <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
                 <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
                     <div class="md:w-10rem relative">
-                        <img class="shadow-2 block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                        <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                         <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                     </div>
                     <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@@ -112,7 +112,7 @@ export default {
                     <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
                         <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
                             <div class="md:w-10rem relative">
-                                <img class="shadow-2 block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                                <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                             </div>
                             <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
@@ -209,7 +209,7 @@ export default {
                     <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
                         <div class="flex flex-column sm:flex-row sm:align-items-center p-4 gap-3" :class="{ 'border-top-1 surface-border': index !== 0 }">
                             <div class="md:w-10rem relative">
-                                <img class="shadow-2 block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                                <img class="block xl:block mx-auto border-round w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute" style="left: 4px; top: 4px"></Tag>
                             </div>
                             <div class="flex flex-column md:flex-row justify-content-between md:align-items-center flex-1 gap-4">
diff --git a/doc/dataview/pt/PTDoc.vue b/doc/dataview/pt/PTDoc.vue
index f48a4671b..839155556 100644
--- a/doc/dataview/pt/PTDoc.vue
+++ b/doc/dataview/pt/PTDoc.vue
@@ -24,7 +24,7 @@
                 <div class="grid grid-nogutter">
                     <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
                         <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                            <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
+                            <img class="w-9 sm:w-16rem xl:w-10rem block xl:block mx-auto border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
                             <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                                 <div class="flex flex-column align-items-center sm:align-items-start gap-3">
                                     <div class="text-2xl font-bold text-900">{{ item.name }}</div>
@@ -59,7 +59,7 @@
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
                             </div>
                             <div class="flex flex-column align-items-center gap-3 py-5">
-                                <img class="w-9 shadow-2 border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
+                                <img class="w-9 border-round" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" />
                                 <div class="text-2xl font-bold">{{ item.name }}</div>
                                 <Rating value="{product.rating}" readonly :cancel="false"></Rating>
                             </div>
@@ -109,7 +109,7 @@ export default {
         <div class="grid grid-nogutter">
             <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
                 <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                    <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                    <img class="w-9 sm:w-16rem xl:w-10rem block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                     <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                         <div class="flex flex-column align-items-center sm:align-items-start gap-3">
                             <div class="text-2xl font-bold text-900">{{ item.name }}</div>
@@ -144,7 +144,7 @@ export default {
                         <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
                     </div>
                     <div class="flex flex-column align-items-center gap-3 py-5">
-                        <img class="w-9 shadow-2 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                        <img class="w-9 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                         <div class="text-2xl font-bold">{{ item.name }}</div>
                         <Rating value="{product.rating}" readonly :cancel="false"></Rating>
                     </div>
@@ -184,7 +184,7 @@ export default {
                 <div class="grid grid-nogutter">
                     <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
                         <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                            <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                            <img class="w-9 sm:w-16rem xl:w-10rem block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                             <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                                 <div class="flex flex-column align-items-center sm:align-items-start gap-3">
                                     <div class="text-2xl font-bold text-900">{{ item.name }}</div>
@@ -219,7 +219,7 @@ export default {
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
                             </div>
                             <div class="flex flex-column align-items-center gap-3 py-5">
-                                <img class="w-9 shadow-2 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                                <img class="w-9 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                                 <div class="text-2xl font-bold">{{ item.name }}</div>
                                 <Rating value="{product.rating}" readonly :cancel="false"></Rating>
                             </div>
@@ -294,7 +294,7 @@ export default {
                 <div class="grid grid-nogutter">
                     <div v-for="(item, index) in slotProps.items" :key="index" class="col-12">
                         <div class="flex flex-column xl:flex-row xl:align-items-start p-4 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
-                            <img class="w-9 sm:w-16rem xl:w-10rem shadow-2 block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                            <img class="w-9 sm:w-16rem xl:w-10rem block xl:block mx-auto border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                             <div class="flex flex-column sm:flex-row justify-content-between align-items-center xl:align-items-start flex-1 gap-4">
                                 <div class="flex flex-column align-items-center sm:align-items-start gap-3">
                                     <div class="text-2xl font-bold text-900">{{ item.name }}</div>
@@ -329,7 +329,7 @@ export default {
                                 <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
                             </div>
                             <div class="flex flex-column align-items-center gap-3 py-5">
-                                <img class="w-9 shadow-2 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
+                                <img class="w-9 border-round" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" />
                                 <div class="text-2xl font-bold">{{ item.name }}</div>
                                 <Rating value="{product.rating}" readonly :cancel="false"></Rating>
                             </div>
diff --git a/doc/dynamicdialog/ExampleDoc.vue b/doc/dynamicdialog/ExampleDoc.vue
index 98e5dd522..a2cc1f785 100644
--- a/doc/dynamicdialog/ExampleDoc.vue
+++ b/doc/dynamicdialog/ExampleDoc.vue
@@ -152,7 +152,7 @@ const showProducts = () => {
 			<Column field="name" header="Name"></Column>
             <Column header="Image">
                 <template #body="slotProps">
-                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
+                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-4rem" />
                 </template>
             </Column>
 			<Column field="category" header="Category"></Column>
@@ -265,7 +265,7 @@ export default {
 			<Column field="name" header="Name"></Column>
             <Column header="Image">
                 <template #body="slotProps">
-                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
+                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-4rem" />
                 </template>
             </Column>
 			<Column field="category" header="Category"></Column>
diff --git a/doc/dynamicdialog/demo/ProductListDemo.vue b/doc/dynamicdialog/demo/ProductListDemo.vue
index 432914505..1e4abf46a 100644
--- a/doc/dynamicdialog/demo/ProductListDemo.vue
+++ b/doc/dynamicdialog/demo/ProductListDemo.vue
@@ -8,7 +8,7 @@
             <Column field="name" header="Name"></Column>
             <Column header="Image">
                 <template #body="slotProps">
-                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="shadow-2 w-4rem" />
+                    <img :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="w-4rem" />
                 </template>
             </Column>
             <Column field="category" header="Category"></Column>
diff --git a/doc/fieldset/TemplateDoc.vue b/doc/fieldset/TemplateDoc.vue
index d6885cac9..802b5112a 100644
--- a/doc/fieldset/TemplateDoc.vue
+++ b/doc/fieldset/TemplateDoc.vue
@@ -5,7 +5,7 @@
     <div class="card">
         <Fieldset>
             <template #legend>
-                <div class="flex align-items-center gap-2 px-2">
+                <div class="flex align-items-center pl-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                     <span class="font-bold">Amy Elsner</span>
                 </div>
@@ -27,7 +27,7 @@ export default {
                 basic: `
 <Fieldset>
     <template #legend>
-        <div class="flex align-items-center gap-2 px-2">
+        <div class="flex align-items-center pl-2">
             <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
             <span class="font-bold">Amy Elsner</span>
         </div>
@@ -43,7 +43,7 @@ export default {
     <div class="card">
         <Fieldset>
             <template #legend>
-                <div class="flex align-items-center gap-2 px-2">
+                <div class="flex align-items-center pl-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                     <span class="font-bold">Amy Elsner</span>
                 </div>
@@ -64,7 +64,7 @@ export default {
     <div class="card">
         <Fieldset>
             <template #legend>
-                <div class="flex align-items-center gap-2 px-2">
+                <div class="flex align-items-center pl-2">
                     <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
                     <span class="font-bold">Amy Elsner</span>
                 </div>
diff --git a/doc/fileupload/TemplateDoc.vue b/doc/fileupload/TemplateDoc.vue
index fab4d07a8..39421ae20 100644
--- a/doc/fileupload/TemplateDoc.vue
+++ b/doc/fileupload/TemplateDoc.vue
@@ -22,7 +22,7 @@
                     <div class="flex flex-wrap p-0 sm:p-5 gap-5">
                         <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
                             <div>
-                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" />
+                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
                             </div>
                             <span class="font-semibold">{{ file.name }}</span>
                             <div>{{ formatSize(file.size) }}</div>
@@ -37,7 +37,7 @@
                     <div class="flex flex-wrap p-0 sm:p-5 gap-5">
                         <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
                             <div>
-                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" />
+                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
                             </div>
                             <span class="font-semibold">{{ file.name }}</span>
                             <div>{{ formatSize(file.size) }}</div>
@@ -86,7 +86,7 @@ export default {
             <div class="flex flex-wrap p-0 sm:p-5 gap-5">
                 <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
                     <div>
-                        <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" />
+                        <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
                     </div>
                     <span class="font-semibold">{{ file.name }}</span>
                     <div>{{ formatSize(file.size) }}</div>
@@ -101,7 +101,7 @@ export default {
             <div class="flex flex-wrap p-0 sm:p-5 gap-5">
                 <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
                     <div>
-                        <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" />
+                        <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
                     </div>
                     <span class="font-semibold">{{ file.name }}</span>
                     <div>{{ formatSize(file.size) }}</div>
@@ -142,7 +142,7 @@ export default {
                     <div class="flex flex-wrap p-0 sm:p-5 gap-5">
                         <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
                             <div>
-                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" />
+                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
                             </div>
                             <span class="font-semibold">{{ file.name }}</span>
                             <div>{{ formatSize(file.size) }}</div>
@@ -157,7 +157,7 @@ export default {
                     <div class="flex flex-wrap p-0 sm:p-5 gap-5">
                         <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
                             <div>
-                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" />
+                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
                             </div>
                             <span class="font-semibold">{{ file.name }}</span>
                             <div>{{ formatSize(file.size) }}</div>
@@ -251,7 +251,7 @@ export default {
                     <div class="flex flex-wrap p-0 sm:p-5 gap-5">
                         <div v-for="(file, index) of files" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
                             <div>
-                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" />
+                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
                             </div>
                             <span class="font-semibold">{{ file.name }}</span>
                             <div>{{ formatSize(file.size) }}</div>
@@ -266,7 +266,7 @@ export default {
                     <div class="flex flex-wrap p-0 sm:p-5 gap-5">
                         <div v-for="(file, index) of uploadedFiles" :key="file.name + file.type + file.size" class="card m-0 px-6 flex flex-column border-1 surface-border align-items-center gap-3">
                             <div>
-                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" class="shadow-2" />
+                                <img role="presentation" :alt="file.name" :src="file.objectURL" width="100" height="50" />
                             </div>
                             <span class="font-semibold">{{ file.name }}</span>
                             <div>{{ formatSize(file.size) }}</div>
diff --git a/doc/megamenu/TemplateDoc.vue b/doc/megamenu/TemplateDoc.vue
index 5fd84e831..92d7e70d2 100644
--- a/doc/megamenu/TemplateDoc.vue
+++ b/doc/megamenu/TemplateDoc.vue
@@ -5,7 +5,7 @@
         </p>
     </DocSectionText>
     <div class="card">
-        <MegaMenu :model="items" class="p-3 surface-0 shadow-2" style="border-radius: 3rem">
+        <MegaMenu :model="items" class="p-3 surface-0" style="border-radius: 3rem">
             <template #start>
                 <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
                     <path
@@ -100,7 +100,7 @@ export default {
             ],
             code: {
                 basic: `
-<MegaMenu :model="items" class="p-3 surface-0 shadow-2" style="border-radius: 3rem">
+<MegaMenu :model="items" class="p-3 surface-0" style="border-radius: 3rem">
     <template #start>
         <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
             <path d="..." fill="var(--primary-color)" />
@@ -135,7 +135,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <MegaMenu :model="items" class="p-3 surface-0 shadow-2" style="border-radius: 3rem">
+        <MegaMenu :model="items" class="p-3 surface-0" style="border-radius: 3rem">
             <template #start>
                 <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
                     <path
@@ -235,7 +235,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <MegaMenu :model="items" class="p-3 surface-0 shadow-2" style="border-radius: 3rem">
+        <MegaMenu :model="items" class="p-3 surface-0" style="border-radius: 3rem">
             <template #start>
                 <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-2rem">
                     <path
diff --git a/doc/menubar/TemplateDoc.vue b/doc/menubar/TemplateDoc.vue
index 7371ad275..9066487d5 100644
--- a/doc/menubar/TemplateDoc.vue
+++ b/doc/menubar/TemplateDoc.vue
@@ -24,7 +24,7 @@
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
                     <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="hasSubmenu" :class="['pi pi-angle-down text-primary', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
+                    <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
                 </a>
             </template>
             <template #end>
@@ -112,7 +112,7 @@ export default {
             <span class="ml-2">{{ item.label }}</span>
             <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
             <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
-            <i v-if="hasSubmenu" :class="['pi pi-angle-down text-primary', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
+            <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
         </a>
     </template>
     <template #end>
@@ -145,7 +145,7 @@ export default {
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
                     <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="hasSubmenu" :class="['pi pi-angle-down text-primary', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
+                    <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
                 </a>
             </template>
             <template #end>
@@ -244,7 +244,7 @@ export default {
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" :class="{ 'ml-auto': !root, 'ml-2': root }" :value="item.badge" />
                     <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="hasSubmenu" :class="['pi pi-angle-down text-primary', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
+                    <i v-if="hasSubmenu" :class="['pi pi-angle-down', { 'pi-angle-down ml-2': root, 'pi-angle-right ml-auto': !root }]"></i>
                 </a>
             </template>
             <template #end>
diff --git a/doc/orderlist/BasicDoc.vue b/doc/orderlist/BasicDoc.vue
index 386b43bff..84764d29f 100644
--- a/doc/orderlist/BasicDoc.vue
+++ b/doc/orderlist/BasicDoc.vue
@@ -7,7 +7,7 @@
             <template #header> List of Products </template>
             <template #item="slotProps">
                 <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
                     <div class="flex-1 flex flex-column gap-2">
                         <span class="font-bold">{{ slotProps.item.name }}</span>
                         <div class="flex align-items-center gap-2">
@@ -35,7 +35,7 @@ export default {
     <template #header> List of Products </template>
     <template #item="slotProps">
         <div class="flex flex-wrap p-2 align-items-center gap-3">
-            <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+            <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
             <div class="flex-1 flex flex-column gap-2">
                 <span class="font-bold">{{ slotProps.item.name }}</span>
                 <div class="flex align-items-center gap-2">
@@ -55,7 +55,7 @@ export default {
             <template #header> List of Products </template>
             <template #item="slotProps">
                 <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
                     <div class="flex-1 flex flex-column gap-2">
                         <span class="font-bold">{{ slotProps.item.name }}</span>
                         <div class="flex align-items-center gap-2">
@@ -91,7 +91,7 @@ export default {
             <template #header> List of Products </template>
             <template #item="slotProps">
                 <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
                     <div class="flex-1 flex flex-column gap-2">
                         <span class="font-bold">{{ slotProps.item.name }}</span>
                         <div class="flex align-items-center gap-2">
diff --git a/doc/orderlist/pt/PTDoc.vue b/doc/orderlist/pt/PTDoc.vue
index a74c7c35e..48bbd2dd3 100644
--- a/doc/orderlist/pt/PTDoc.vue
+++ b/doc/orderlist/pt/PTDoc.vue
@@ -14,7 +14,7 @@
             <template #header> List of Products </template>
             <template #item="slotProps">
                 <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
                     <div class="flex-1 flex flex-column gap-2">
                         <span class="font-bold">{{ slotProps.item.name }}</span>
                         <div class="flex align-items-center gap-2">
@@ -52,7 +52,7 @@ export default {
     <template #header> List of Products </template>
     <template #item="slotProps">
         <div class="flex flex-wrap p-2 align-items-center gap-3">
-            <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+            <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
             <div class="flex-1 flex flex-column gap-2">
                 <span class="font-bold">{{ slotProps.item.name }}</span>
                 <div class="flex align-items-center gap-2">
@@ -81,7 +81,7 @@ export default {
             <template #header> List of Products </template>
             <template #item="slotProps">
                 <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
                     <div class="flex-1 flex flex-column gap-2">
                         <span class="font-bold">{{ slotProps.item.name }}</span>
                         <div class="flex align-items-center gap-2">
@@ -126,7 +126,7 @@ export default {
             <template #header> List of Products </template>
             <template #item="slotProps">
                 <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
                     <div class="flex-1 flex flex-column gap-2">
                         <span class="font-bold">{{ slotProps.item.name }}</span>
                         <div class="flex align-items-center gap-2">
diff --git a/doc/organizationchart/TemplateDoc.vue b/doc/organizationchart/TemplateDoc.vue
index 879c00366..5f18a63c6 100644
--- a/doc/organizationchart/TemplateDoc.vue
+++ b/doc/organizationchart/TemplateDoc.vue
@@ -6,7 +6,7 @@
         <OrganizationChart :value="data" collapsible>
             <template #country="slotProps">
                 <div class="flex flex-column align-items-center">
-                    <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`w-2rem shadow-2 flag flag-${slotProps.node.data}`" />
+                    <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`w-2rem flag flag-${slotProps.node.data}`" />
                     <div class="mt-3 font-medium text-lg">{{ slotProps.node.label }}</div>
                 </div>
             </template>
@@ -75,7 +75,7 @@ export default {
 <OrganizationChart :value="data" collapsible>
     <template #country="slotProps">
         <div class="flex flex-column align-items-center">
-            <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-2rem shadow-2 flag flag-\${slotProps.node.data}\`" />
+            <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-2rem flag flag-\${slotProps.node.data}\`" />
             <div class="mt-3 font-medium text-lg">{{ slotProps.node.label }}</div>
         </div>
     </template>
@@ -90,7 +90,7 @@ export default {
         <OrganizationChart :value="data" collapsible>
             <template #country="slotProps">
                 <div class="flex flex-column align-items-center">
-                    <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-2rem shadow-2 flag flag-\${slotProps.node.data}\`" />
+                    <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-2rem flag flag-\${slotProps.node.data}\`" />
                     <div class="mt-3 font-medium text-lg">{{ slotProps.node.label }}</div>
                 </div>
             </template>
@@ -164,7 +164,7 @@ export default {
         <OrganizationChart :value="data" collapsible>
             <template #country="slotProps">
                 <div class="flex flex-column align-items-center">
-                    <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-2rem shadow-2 flag flag-\${slotProps.node.data}\`" />
+                    <img :alt="slotProps.node.label" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`w-2rem flag flag-\${slotProps.node.data}\`" />
                     <div class="mt-3 font-medium text-lg">{{ slotProps.node.label }}</div>
                 </div>
             </template>
diff --git a/doc/overlaypanel/DataTableDoc.vue b/doc/overlaypanel/DataTableDoc.vue
index be418b22d..33aac9f4a 100644
--- a/doc/overlaypanel/DataTableDoc.vue
+++ b/doc/overlaypanel/DataTableDoc.vue
@@ -6,7 +6,7 @@
     <div class="card flex flex-column align-items-center gap-3">
         <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
 
-        <div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round">
+        <div v-if="selectedProduct" class="p-5 surface-card border-round">
             <div class="relative">
                 <img :src="`https://primefaces.org/cdn/primevue/images/product/${selectedProduct.image}`" :alt="selectedProduct.name" class="w-full sm:w-20rem" />
             </div>
@@ -46,7 +46,7 @@ export default {
 <Toast />
 <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
 
-<div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round">
+<div v-if="selectedProduct" class="p-5 surface-card border-round">
     <div class="relative">
         <img :src="\`/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-4rem shadow-1" class="w-full sm:w-20rem" />
     </div>
@@ -79,7 +79,7 @@ export default {
         <Toast />
         <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
 
-        <div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round">
+        <div v-if="selectedProduct" class="p-5 surface-card border-round">
             <div class="relative">
                 <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-full sm:w-20rem" />
             </div>
@@ -141,7 +141,7 @@ export default {
         <Toast />
         <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria-haspopup="true" aria-controls="overlay_panel" />
 
-        <div v-if="selectedProduct" class="p-5 surface-card shadow-2 border-round">
+        <div v-if="selectedProduct" class="p-5 surface-card border-round">
             <div class="relative">
                 <img :src="\`https://primefaces.org/cdn/primevue/images/product/\${selectedProduct.image}\`" :alt="selectedProduct.name" class="w-full sm:w-20rem" />
             </div>
diff --git a/doc/paginator/TemplateDoc.vue b/doc/paginator/TemplateDoc.vue
index 73d78c09b..2f80e4d2b 100644
--- a/doc/paginator/TemplateDoc.vue
+++ b/doc/paginator/TemplateDoc.vue
@@ -20,7 +20,7 @@
         <Paginator v-model:first="first" :rows="1" :totalRecords="12" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
 
         <div class="p-3 text-center">
-            <img :src="`https://primefaces.org/cdn/primevue/images/nature/nature${first + 1}.jpg`" :alt="first" class="shadow-2 border-round w-full sm:w-30rem" />
+            <img :src="`https://primefaces.org/cdn/primevue/images/nature/nature${first + 1}.jpg`" :alt="first" class="border-round w-full sm:w-30rem" />
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -36,7 +36,7 @@ export default {
 <Paginator v-model:first="first" :rows="1" :totalRecords="1" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
 
 <div class="p-3 text-center">
-    <img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="shadow-2 border-round w-full sm:w-30rem" />
+    <img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="border-round w-full sm:w-30rem" />
 </div>
 `,
                 options: `
@@ -45,7 +45,7 @@ export default {
         <Paginator v-model:first="first" :rows="1" :totalRecords="12" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
 
         <div class="p-3 text-center">
-            <img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="shadow-2 border-round w-full sm:w-30rem" />
+            <img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="border-round w-full sm:w-30rem" />
         </div>
     </div>
 </template>
@@ -66,7 +66,7 @@ export default {
         <Paginator v-model:first="first" :rows="1" :totalRecords="12" template="FirstPageLink PrevPageLink CurrentPageReport NextPageLink LastPageLink" />
 
         <div class="p-3 text-center">
-            <img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="shadow-2 border-round w-full sm:w-30rem" />
+            <img :src="\`https://primefaces.org/cdn/primevue/images/nature/nature\${first + 1}.jpg\`" :alt="first" class="border-round w-full sm:w-30rem" />
         </div>
     </div>
 </template>
diff --git a/doc/picklist/BasicDoc.vue b/doc/picklist/BasicDoc.vue
index b634456b4..0f736b279 100644
--- a/doc/picklist/BasicDoc.vue
+++ b/doc/picklist/BasicDoc.vue
@@ -8,7 +8,7 @@
             <template #targetheader> Selected </template>
             <template #item="slotProps">
                 <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
                     <div class="flex-1 flex flex-column gap-2">
                         <span class="font-bold">{{ slotProps.item.name }}</span>
                         <div class="flex align-items-center gap-2">
@@ -38,7 +38,7 @@ export default {
     <template #targetheader> Selected </template>
     <template #item="slotProps">
         <div class="flex flex-wrap p-2 align-items-center gap-3">
-            <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+            <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
             <div class="flex-1 flex flex-column gap-2">
                 <span class="font-bold">{{ slotProps.item.name }}</span>
                 <div class="flex align-items-center gap-2">
@@ -59,7 +59,7 @@ export default {
             <template #targetheader> Selected </template>
             <template #item="slotProps">
                 <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
                     <div class="flex-1 flex flex-column gap-2">
                         <span class="font-bold">{{ slotProps.item.name }}</span>
                         <div class="flex align-items-center gap-2">
@@ -96,7 +96,7 @@ export default {
             <template #targetheader> Selected </template>
             <template #item="slotProps">
                 <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
                     <div class="flex-1 flex flex-column gap-2">
                         <span class="font-bold">{{ slotProps.item.name }}</span>
                         <div class="flex align-items-center gap-2">
diff --git a/doc/picklist/pt/PTDoc.vue b/doc/picklist/pt/PTDoc.vue
index 62508af85..66e493d1a 100644
--- a/doc/picklist/pt/PTDoc.vue
+++ b/doc/picklist/pt/PTDoc.vue
@@ -19,7 +19,7 @@
             <template #targetheader> Selected </template>
             <template #item="slotProps">
                 <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
                     <div class="flex-1 flex flex-column gap-2">
                         <span class="font-bold">{{ slotProps.item.name }}</span>
                         <div class="flex align-items-center gap-2">
@@ -62,7 +62,7 @@ export default {
     <template #targetheader> Selected </template>
     <template #item="slotProps">
         <div class="flex flex-wrap p-2 align-items-center gap-3">
-            <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+            <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
             <div class="flex-1 flex flex-column gap-2">
                 <span class="font-bold">{{ slotProps.item.name }}</span>
                 <div class="flex align-items-center gap-2">
@@ -96,7 +96,7 @@ export default {
             <template #targetheader> Selected </template>
             <template #item="slotProps">
                 <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
                     <div class="flex-1 flex flex-column gap-2">
                         <span class="font-bold">{{ slotProps.item.name }}</span>
                         <div class="flex align-items-center gap-2">
@@ -146,7 +146,7 @@ export default {
             <template #targetheader> Selected </template>
             <template #item="slotProps">
                 <div class="flex flex-wrap p-2 align-items-center gap-3">
-                    <img class="w-4rem shadow-2 flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
+                    <img class="w-4rem flex-shrink-0 border-round" :src="'https://primefaces.org/cdn/primevue/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
                     <div class="flex-1 flex flex-column gap-2">
                         <span class="font-bold">{{ slotProps.item.name }}</span>
                         <div class="flex align-items-center gap-2">
diff --git a/doc/ripple/CustomDoc.vue b/doc/ripple/CustomDoc.vue
index 4e5266050..0955541d6 100644
--- a/doc/ripple/CustomDoc.vue
+++ b/doc/ripple/CustomDoc.vue
@@ -9,7 +9,7 @@
                     root: { style: 'background: rgba(75, 175, 80, 0.3)' }
                 }
             }"
-            class="p-ripple box shadow-2"
+            class="p-ripple box"
         >
             Green
         </div>
@@ -19,7 +19,7 @@
                     root: { style: 'background: rgba(255, 193, 6, 0.3)' }
                 }
             }"
-            class="p-ripple box shadow-2"
+            class="p-ripple box"
         >
             Orange
         </div>
@@ -29,7 +29,7 @@
                     root: { style: 'background: rgba(156, 39, 176, 0.3)' }
                 }
             }"
-            class="p-ripple box shadow-2"
+            class="p-ripple box"
         >
             Purple
         </div>
@@ -49,7 +49,7 @@ export default {
             root: { style: 'background: rgba(75, 175, 80, 0.3)' }
         }
     }"
-    class="p-ripple box shadow-2"
+    class="p-ripple box"
 >
     Green
 </div>
@@ -59,7 +59,7 @@ export default {
             root: { style: 'background: rgba(255, 193, 6, 0.3)' }
         }
     }"
-    class="p-ripple box shadow-2"
+    class="p-ripple box"
 >
     Orange
 </div>
@@ -69,7 +69,7 @@ export default {
             root: { style: 'background: rgba(156, 39, 176, 0.3)' }
         }
     }"
-    class="p-ripple box shadow-2"
+    class="p-ripple box"
 >
     Purple
 </div>
@@ -83,7 +83,7 @@ export default {
                     root: { style: 'background: rgba(75, 175, 80, 0.3)' }
                 }
             }"
-            class="p-ripple box shadow-2"
+            class="p-ripple box"
         >
             Green
         </div>
@@ -93,7 +93,7 @@ export default {
                     root: { style: 'background: rgba(255, 193, 6, 0.3)' }
                 }
             }"
-            class="p-ripple box shadow-2"
+            class="p-ripple box"
         >
             Orange
         </div>
@@ -103,7 +103,7 @@ export default {
                     root: { style: 'background: rgba(156, 39, 176, 0.3)' }
                 }
             }"
-            class="p-ripple box shadow-2"
+            class="p-ripple box"
         >
             Purple
         </div>
@@ -129,7 +129,7 @@ export default {
                     root: { style: 'background: rgba(75, 175, 80, 0.3)' }
                 }
             }"
-            class="p-ripple box shadow-2"
+            class="p-ripple box"
         >
             Green
         </div>
@@ -139,7 +139,7 @@ export default {
                     root: { style: 'background: rgba(255, 193, 6, 0.3)' }
                 }
             }"
-            class="p-ripple box shadow-2"
+            class="p-ripple box"
         >
             Orange
         </div>
@@ -149,7 +149,7 @@ export default {
                     root: { style: 'background: rgba(156, 39, 176, 0.3)' }
                 }
             }"
-            class="p-ripple box shadow-2"
+            class="p-ripple box"
         >
             Purple
         </div>
diff --git a/doc/ripple/DefaultDoc.vue b/doc/ripple/DefaultDoc.vue
index d198f9cb8..657ca0f9f 100644
--- a/doc/ripple/DefaultDoc.vue
+++ b/doc/ripple/DefaultDoc.vue
@@ -3,7 +3,7 @@
         <p>Ripple is enabled by adding add <i>p-ripple</i> class to the target and attach the directive with the v- prefix.</p>
     </DocSectionText>
     <div class="card flex justify-content-center align-items-center">
-        <div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold">Default</div>
+        <div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold">Default</div>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,12 +14,12 @@ export default {
         return {
             code: {
                 basic: `
-<div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold">Default</div>
+<div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold">Default</div>
 `,
                 options: `
 <template>
     <div class="card card-container flex justify-content-center align-items-center">
-        <div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold">Default</div>
+        <div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold">Default</div>
     </div>
 </template>
 
@@ -29,7 +29,7 @@ export default {
                 composition: `
 <template>
     <div class="card card-container flex justify-content-center align-items-center">
-        <div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold">Default</div>
+        <div v-ripple class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold">Default</div>
     </div>
 </template>
 
diff --git a/doc/ripple/pt/PTDoc.vue b/doc/ripple/pt/PTDoc.vue
index e36d2cd86..02db2a30d 100644
--- a/doc/ripple/pt/PTDoc.vue
+++ b/doc/ripple/pt/PTDoc.vue
@@ -7,7 +7,7 @@
                     root: 'bg-yellow-400'
                 }
             }"
-            class="p-ripple bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold"
+            class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold"
         >
             Default
         </div>
@@ -27,7 +27,7 @@ export default {
             root: 'bg-yellow-400'
         }
     }"
-    class="p-ripple bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold"
+    class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold"
 >
     Default
 </div>
@@ -41,7 +41,7 @@ export default {
                     root: 'bg-yellow-400'
                 }
             }"
-            class="p-ripple bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold"
+            class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold"
         >
             Default
         </div>
@@ -60,7 +60,7 @@ export default {
                     root: 'bg-yellow-400'
                 }
             }"
-            class="p-ripple bg-primary flex select-none justify-content-center align-items-center shadow-2 border-round p-6 font-bold"
+            class="p-ripple bg-primary flex select-none justify-content-center align-items-center border-round p-6 font-bold"
         >
             Default
         </div>
diff --git a/doc/styleclass/AnimationDoc.vue b/doc/styleclass/AnimationDoc.vue
index 99d6ed34e..257f21b1f 100644
--- a/doc/styleclass/AnimationDoc.vue
+++ b/doc/styleclass/AnimationDoc.vue
@@ -11,7 +11,7 @@
             <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" />
         </div>
         <div class="hidden animation-duration-500 box">
-            <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div>
+            <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold w-8rem h-8rem">Content</div>
         </div>
     </div>
     <DocSectionCode :code="code" />
@@ -26,7 +26,7 @@ export default {
 <Button v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" label="Show" class="mr-2" />
 <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" />
 <div class="hidden animation-duration-500 box">
-    <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div>
+    <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold w-8rem h-8rem">Content</div>
 </div>
 `,
                 options: `
@@ -37,7 +37,7 @@ export default {
             <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" />
         </div>
         <div class="hidden animation-duration-500 box">
-            <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div>
+            <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold w-8rem h-8rem">Content</div>
         </div>
     </div>
 </template>
@@ -97,7 +97,7 @@ export default {
             <Button v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" label="Hide" severity="secondary" />
         </div>
         <div class="hidden animation-duration-500 box">
-            <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold shadow-2 w-8rem h-8rem">Content</div>
+            <div class="flex bg-green-500 text-white align-items-center justify-content-center py-3 border-round-md mt-3 font-bold w-8rem h-8rem">Content</div>
         </div>
     </div>
 </template>
diff --git a/doc/tag/TemplateDoc.vue b/doc/tag/TemplateDoc.vue
index b53665cbb..66d36e49b 100644
--- a/doc/tag/TemplateDoc.vue
+++ b/doc/tag/TemplateDoc.vue
@@ -3,11 +3,10 @@
         <p>Children of the component are passed as the content for templating.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Tag style="background: linear-gradient(to right, var(--primary-300), var(--primary-700))">
-            <div class="flex align-items-center gap-2">
+        <Tag style="background: linear-gradient(to right, var(--surface-900), var(--surface-700)); color: var(--surface-0)">
+            <div class="flex align-items-center gap-2 px-1">
                 <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
                 <span class="text-base">Italy</span>
-                <i class="pi pi-times text-xs"></i>
             </div>
         </Tag>
     </div>
@@ -20,22 +19,20 @@ export default {
         return {
             code: {
                 basic: `
-<Tag style="background: linear-gradient(to right, var(--primary-300), var(--primary-700))">
-    <div class="flex align-items-center gap-2">
-        <img alt="Country" src="/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
-        <span class="text-base">Italia</span>
-        <i class="pi pi-times text-xs"></i>
+<Tag style="background: linear-gradient(to right, var(--surface-900), var(--surface-700)); color: var(--surface-0)">
+    <div class="flex align-items-center gap-2 px-1">
+        <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
+        <span class="text-base">Italy</span>
     </div>
 </Tag>
 `,
                 options: `
 <template>
     <div class="card flex justify-content-center">
-        <Tag style="background: linear-gradient(to right, var(--primary-300), var(--primary-700))">
-            <div class="flex align-items-center gap-2">
+        <Tag style="background: linear-gradient(to right, var(--surface-900), var(--surface-700)); color: var(--surface-0)">
+            <div class="flex align-items-center gap-2 px-1">
                 <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
-                <span class="text-base">Italia</span>
-                <i class="pi pi-times text-xs"></i>
+                <span class="text-base">Italy</span>
             </div>
         </Tag>
     </div>    
@@ -47,11 +44,10 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-content-center">
-        <Tag style="background: linear-gradient(to right, var(--primary-300), var(--primary-700))">
-            <div class="flex align-items-center gap-2">
+        <Tag style="background: linear-gradient(to right, var(--surface-900), var(--surface-700)); color: var(--surface-0)">
+            <div class="flex align-items-center gap-2 px-1">
                 <img alt="Country" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" class="flag flag-it" style="width: 18px" />
-                <span class="text-base">Italia</span>
-                <i class="pi pi-times text-xs"></i>
+                <span class="text-base">Italy</span>
             </div>
         </Tag>
     </div>    
diff --git a/doc/textarea/BasicDoc.vue b/doc/textarea/BasicDoc.vue
index b7264226a..15c33fe83 100644
--- a/doc/textarea/BasicDoc.vue
+++ b/doc/textarea/BasicDoc.vue
@@ -3,7 +3,7 @@
         <p>A model can be bound using the standard <i>v-model</i> directive.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Textarea v-model="value" rows="5" cols="30" />
+        <Textarea v-model="value" rows="5" cols="30" style="resize: none" />
     </div>
     <DocSectionCode :code="code" />
 </template>
diff --git a/doc/textarea/DisabledDoc.vue b/doc/textarea/DisabledDoc.vue
index 94303d4bf..8dde93eaf 100644
--- a/doc/textarea/DisabledDoc.vue
+++ b/doc/textarea/DisabledDoc.vue
@@ -3,7 +3,7 @@
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Textarea v-model="value" rows="5" cols="30" disabled />
+        <Textarea v-model="value" rows="5" cols="30" disabled style="resize: none" />
     </div>
     <DocSectionCode :code="code" />
 </template>
diff --git a/doc/textarea/FloatLabelDoc.vue b/doc/textarea/FloatLabelDoc.vue
index e6182dca0..8bf7e5502 100644
--- a/doc/textarea/FloatLabelDoc.vue
+++ b/doc/textarea/FloatLabelDoc.vue
@@ -4,7 +4,7 @@
     </DocSectionText>
     <div class="card flex justify-content-center">
         <span class="p-float-label">
-            <Textarea v-model="value" rows="5" cols="30" />
+            <Textarea v-model="value" rows="5" cols="30" style="resize: none" />
             <label>Username</label>
         </span>
     </div>
diff --git a/doc/textarea/InvalidDoc.vue b/doc/textarea/InvalidDoc.vue
index 7db4a6acb..bc7e78b2d 100644
--- a/doc/textarea/InvalidDoc.vue
+++ b/doc/textarea/InvalidDoc.vue
@@ -3,7 +3,7 @@
         <p>Invalid state style is added using the <i>p-invalid</i> class to indicate a failed validation.</p>
     </DocSectionText>
     <div class="card flex justify-content-center">
-        <Textarea v-model="value" rows="5" cols="30" class="p-invalid" />
+        <Textarea v-model="value" rows="5" cols="30" class="p-invalid" style="resize: none" />
     </div>
     <DocSectionCode :code="code" />
 </template>
diff --git a/doc/tieredmenu/TemplateDoc.vue b/doc/tieredmenu/TemplateDoc.vue
index 1a6279e85..8f864ba87 100644
--- a/doc/tieredmenu/TemplateDoc.vue
+++ b/doc/tieredmenu/TemplateDoc.vue
@@ -10,7 +10,7 @@
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
                     <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto text-primary"></i>
+                    <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
                 </a>
             </template>
         </TieredMenu>
@@ -110,7 +110,7 @@ export default {
             <span class="ml-2">{{ item.label }}</span>
             <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
             <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
-            <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto text-primary"></i>
+            <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
         </a>
     </template>
 </TieredMenu>
@@ -125,7 +125,7 @@ export default {
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
                     <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto text-primary"></i>
+                    <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
                 </a>
             </template>
         </TieredMenu>
@@ -230,7 +230,7 @@ export default {
                     <span class="ml-2">{{ item.label }}</span>
                     <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
                     <span v-if="item.shortcut" class="ml-auto border-1 surface-border border-round surface-100 text-xs p-1">{{ item.shortcut }}</span>
-                    <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto text-primary"></i>
+                    <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
                 </a>
             </template>
         </TieredMenu>
diff --git a/doc/toast/HeadlessDoc.vue b/doc/toast/HeadlessDoc.vue
index 9461535e9..de348c785 100644
--- a/doc/toast/HeadlessDoc.vue
+++ b/doc/toast/HeadlessDoc.vue
@@ -5,7 +5,7 @@
     <div class="card flex justify-content-center">
         <Toast position="top-center" group="headless" @close="visible = false">
             <template #container="{ message, closeCallback }">
-                <section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
+                <section class="flex p-3 gap-3 w-full bg-black-alpha-90" style="border-radius: 10px">
                     <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
                     <div class="flex flex-column gap-3 w-full">
                         <p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
@@ -38,7 +38,7 @@ export default {
                 basic: `
 <Toast position="top-center" group="headless" @close="visible = false">
     <template #container="{ message, closeCallback }">
-        <section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
+        <section class="flex p-3 gap-3 w-full bg-black-alpha-90" style="border-radius: 10px">
             <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
             <div class="flex flex-column gap-3 w-full">
                 <p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
@@ -62,7 +62,7 @@ export default {
     <div class="card flex justify-content-center">
         <Toast position="top-center" group="headless" @close="visible = false">
             <template #container="{ message, closeCallback }">
-                <section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
+                <section class="flex p-3 gap-3 w-full bg-black-alpha-90" style="border-radius: 10px">
                     <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
                     <div class="flex flex-column gap-3 w-full">
                         <p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
@@ -129,7 +129,7 @@ export default {
     <div class="card flex justify-content-center">
         <Toast position="top-center" group="headless" @close="visible = false">
             <template #container="{ message, closeCallback }">
-                <section class="flex p-3 gap-3 w-full bg-black-alpha-90 shadow-2" style="border-radius: 10px">
+                <section class="flex p-3 gap-3 w-full bg-black-alpha-90" style="border-radius: 10px">
                     <i class="pi pi-cloud-upload text-primary-500 text-2xl"></i>
                     <div class="flex flex-column gap-3 w-full">
                         <p class="m-0 font-semibold text-base text-white">{{ message.summary }}</p>
diff --git a/doc/toolbar/CustomDoc.vue b/doc/toolbar/CustomDoc.vue
index 76545e28b..e7dc58537 100644
--- a/doc/toolbar/CustomDoc.vue
+++ b/doc/toolbar/CustomDoc.vue
@@ -3,7 +3,7 @@
         <p>A customized toolbar with navigation bar like functionality.</p>
     </DocSectionText>
     <div class="card">
-        <Toolbar class="bg-gray-900 shadow-2" style="border-radius: 3rem; background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))">
+        <Toolbar class="bg-gray-900" style="border-radius: 3rem; background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))">
             <template #start>
                 <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path
@@ -42,7 +42,7 @@ export default {
         return {
             code: {
                 basic: `
-<Toolbar class="bg-gray-900 shadow-2" style="border-radius: 3rem; background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))">
+<Toolbar class="bg-gray-900" style="border-radius: 3rem; background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))">
     <template #start>
         <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path d="..." fill="#ffffff" />
@@ -69,7 +69,7 @@ export default {
                 options: `
 <template>
     <div class="card">
-        <Toolbar class="bg-gray-900 shadow-2" style="border-radius: 3rem; background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))">
+        <Toolbar class="bg-gray-900" style="border-radius: 3rem; background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))">
             <template #start>
                 <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path
@@ -107,7 +107,7 @@ export default {
                 composition: `
 <template>
     <div class="card">
-        <Toolbar class="bg-gray-900 shadow-2" style="border-radius: 3rem; background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))">
+        <Toolbar class="bg-gray-900" style="border-radius: 3rem; background-image: linear-gradient(to right, var(--bluegray-500), var(--bluegray-800))">
             <template #start>
                 <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path