diff --git a/components/landing/HeroSection.vue b/components/landing/HeroSection.vue
index fd8081b95..11a383eed 100644
--- a/components/landing/HeroSection.vue
+++ b/components/landing/HeroSection.vue
@@ -22,7 +22,7 @@
                     <div class="flex flex-col w-6/12 gap-8 pt-20 pr-4">
                         <div class="box p-6 animate-fadein animate-duration-500">
                             <div class="flex gap-2">
-                                <div class="w-24 flex-shrink-0">
+                                <div class="w-24 shrink-0">
                                     <span class="text-surface-500 dark:text-surface-400 font-medium block mb-4">Amount</span>
                                     <InputNumber v-model="value1" mode="currency" currency="USD" locale="en-US" class="w-full" inputClass="w-full" />
                                 </div>
diff --git a/doc/contextmenu/TemplateDoc.vue b/doc/contextmenu/TemplateDoc.vue
index 6e7524ab1..57b8217cc 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 items-center gap-4">
-                    <img class="w-16 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
+                    <img class="w-16 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
                     <div class="flex-1 flex flex-col gap-1">
                         <span class="font-bold">{{ product.name }}</span>
                         <div class="flex items-center gap-2">
@@ -87,7 +87,7 @@ export default {
         @contextmenu="onRightClick($event, product.id)"
     >
         <div class="flex flex-wrap p-2 items-center gap-4">
-            <img class="w-16 flex-shrink-0 rounded" :src="'/images/product/' + product.image" :alt="product.name" />
+            <img class="w-16 shrink-0 rounded" :src="'/images/product/' + product.image" :alt="product.name" />
             <div class="flex-1 flex flex-col gap-1">
                 <span class="font-bold">{{ product.name }}</span>
                 <div class="flex items-center gap-2">
@@ -122,7 +122,7 @@ export default {
                 @contextmenu="onRightClick($event, product.id)"
             >
                 <div class="flex flex-wrap p-2 items-center gap-4">
-                    <img class="w-16 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
+                    <img class="w-16 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
                     <div class="flex-1 flex flex-col gap-1">
                         <span class="font-bold">{{ product.name }}</span>
                         <div class="flex items-center gap-2">
@@ -212,7 +212,7 @@ export default {
                 @contextmenu="onRightClick($event, product.id)"
             >
                 <div class="flex flex-wrap p-2 items-center gap-4">
-                    <img class="w-16 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
+                    <img class="w-16 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + product.image" :alt="product.name" />
                     <div class="flex-1 flex flex-col gap-1">
                         <span class="font-bold">{{ product.name }}</span>
                         <div class="flex items-center gap-2">
diff --git a/doc/drawer/HeadlessDoc.vue b/doc/drawer/HeadlessDoc.vue
index 439d6ef6b..f911231ae 100644
--- a/doc/drawer/HeadlessDoc.vue
+++ b/doc/drawer/HeadlessDoc.vue
@@ -6,7 +6,7 @@
         <Drawer v-model:visible="visible">
             <template #container="{ closeCallback }">
                 <div class="flex flex-col h-full">
-                    <div class="flex items-center justify-between px-6 pt-4 flex-shrink-0">
+                    <div class="flex items-center justify-between px-6 pt-4 shrink-0">
                         <span class="inline-flex items-center gap-2">
                             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path
@@ -21,7 +21,7 @@
                             <span class="font-semibold text-2xl text-primary">Your Logo</span>
                         </span>
                         <span>
-                            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-8 w-8"></Button>
+                            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined></Button>
                         </span>
                     </div>
                     <div class="overflow-y-auto">
@@ -202,7 +202,7 @@ export default {
 <Drawer v-model:visible="visible">
     <template #container="{ closeCallback }">
         <div class="flex flex-col h-full">
-            <div class="flex items-center justify-between px-6 pt-4 flex-shrink-0">
+            <div class="flex items-center justify-between px-6 pt-4 shrink-0">
                 <span class="inline-flex items-center gap-2">
                     <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                         <path d="..." fill="var(--p-primary-color)" />
@@ -211,7 +211,7 @@ export default {
                     <span class="font-semibold text-2xl text-primary">Your Logo</span>
                 </span>
                 <span>
-                    <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-8 w-8"></Button>
+                    <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined></Button>
                 </span>
             </div>
             <div class="overflow-y-auto">
@@ -385,7 +385,7 @@ export default {
         <Drawer v-model:visible="visible">
             <template #container="{ closeCallback }">
                 <div class="flex flex-col h-full">
-                    <div class="flex items-center justify-between px-6 pt-4 flex-shrink-0">
+                    <div class="flex items-center justify-between px-6 pt-4 shrink-0">
                         <span class="inline-flex items-center gap-2">
                             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path
@@ -400,7 +400,7 @@ export default {
                             <span class="font-semibold text-2xl text-primary">Your Logo</span>
                         </span>
                         <span>
-                            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-8 w-8"></Button>
+                            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined></Button>
                         </span>
                     </div>
                     <div class="overflow-y-auto">
@@ -586,7 +586,7 @@ export default {
         <Drawer v-model:visible="visible">
             <template #container="{ closeCallback }">
                 <div class="flex flex-col h-full">
-                    <div class="flex items-center justify-between px-6 pt-4 flex-shrink-0">
+                    <div class="flex items-center justify-between px-6 pt-4 shrink-0">
                         <span class="inline-flex items-center gap-2">
                             <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                                 <path
@@ -601,7 +601,7 @@ export default {
                             <span class="font-semibold text-2xl text-primary">Your Logo</span>
                         </span>
                         <span>
-                            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined class="h-8 w-8"></Button>
+                            <Button type="button" @click="closeCallback" icon="pi pi-times" rounded outlined></Button>
                         </span>
                     </div>
                     <div class="overflow-y-auto">
diff --git a/doc/orderlist/TemplateDoc.vue b/doc/orderlist/TemplateDoc.vue
index 71ef18cb1..951e35c52 100644
--- a/doc/orderlist/TemplateDoc.vue
+++ b/doc/orderlist/TemplateDoc.vue
@@ -6,7 +6,7 @@
         <OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
             <template #item="{ item }">
                 <div class="flex flex-wrap p-1 items-center gap-4">
-                    <img class="w-12 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
                     <div class="flex-1 flex flex-col gap-1">
                         <span class="font-medium">{{ item.name }}</span>
                         <div class="flex items-center gap-1">
@@ -33,7 +33,7 @@ export default {
 <OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
     <template #item="{ item }">
         <div class="flex flex-wrap p-1 items-center gap-4">
-            <img class="w-12 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+            <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
             <div class="flex-1 flex flex-col gap-1">
                 <span class="font-medium">{{ item.name }}</span>
                 <div class="flex items-center gap-1">
@@ -52,7 +52,7 @@ export default {
         <OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
             <template #item="{ item }">
                 <div class="flex flex-wrap p-1 items-center gap-4">
-                    <img class="w-12 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
                     <div class="flex-1 flex flex-col gap-1">
                         <span class="font-medium">{{ item.name }}</span>
                         <div class="flex items-center gap-1">
@@ -87,7 +87,7 @@ export default {
         <OrderList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
             <template #item="{ item }">
                 <div class="flex flex-wrap p-1 items-center gap-4">
-                    <img class="w-12 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
                     <div class="flex-1 flex flex-col gap-1">
                         <span class="font-medium">{{ item.name }}</span>
                         <div class="flex items-center gap-1">
diff --git a/doc/picklist/TemplateDoc.vue b/doc/picklist/TemplateDoc.vue
index cc6b7256e..35f335753 100644
--- a/doc/picklist/TemplateDoc.vue
+++ b/doc/picklist/TemplateDoc.vue
@@ -6,7 +6,7 @@
         <PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem">
             <template #item="{ item }">
                 <div class="flex flex-wrap p-1 items-center gap-4">
-                    <img class="w-12 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
                     <div class="flex-1 flex flex-col gap-1">
                         <span class="font-medium">{{ item.name }}</span>
                         <div class="flex items-center gap-1">
@@ -34,7 +34,7 @@ export default {
 <PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem>
     <template #item="{ item }">
         <div class="flex flex-wrap p-1 items-center gap-4">
-            <img class="w-12 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+            <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
             <div class="flex-1 flex flex-col gap-1">
                 <span class="font-medium">{{ item.name }}</span>
                 <div class="flex items-center gap-1">
@@ -53,7 +53,7 @@ export default {
         <PickList v-model="products" dataKey="id" breakpoint="1400px" scrollHeight="20rem>
             <template #item="{ item }">
                 <div class="flex flex-wrap p-1 items-center gap-4">
-                    <img class="w-12 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
                     <div class="flex-1 flex flex-col gap-1">
                         <span class="font-medium">{{ item.name }}</span>
                         <div class="flex items-center gap-1">
@@ -88,7 +88,7 @@ export default {
         <PickList v-model="products" dataKey="id" breakpoint="1400px">
             <template #item="{ item }">
                 <div class="flex flex-wrap p-1 items-center gap-4">
-                    <img class="w-12 flex-shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
+                    <img class="w-12 shrink-0 rounded" :src="'https://primefaces.org/cdn/primevue/images/product/' + item.image" :alt="item.name" />
                     <div class="flex-1 flex flex-col gap-1">
                         <span class="font-medium">{{ item.name }}</span>
                         <div class="flex items-center gap-1">
diff --git a/pages/roadmap/index.vue b/pages/roadmap/index.vue
index 095587680..78db50118 100644
--- a/pages/roadmap/index.vue
+++ b/pages/roadmap/index.vue
@@ -16,7 +16,7 @@
         <div class="overflow-auto">
             <div style="min-width: 1200px">
                 <div class="flex gap-4 mb-4">
-                    <div class="flex-shrink-0 w-56"></div>
+                    <div class="shrink-0 w-56"></div>
                     <div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q1</div>
                     <div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q2</div>
                     <div class="flex-1 bg-gray-500 text-white font-bold text-center p-4 text-xl rounded">Q3</div>
@@ -25,7 +25,7 @@
 
                 <div class="flex flex-col gap-4">
                     <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
-                        <div class="flex-shrink-0 p-4 bg-blue-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">COMPONENTS</div>
+                        <div class="shrink-0 p-4 bg-blue-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">COMPONENTS</div>
                         <div class="flex-1 flex gap-4 flex-col">
                             <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-blue-500 border-l-8">
                                 <h2 class="text-lg font-bold mt-0 mb-2">New Theming</h2>
@@ -99,7 +99,7 @@
                         </div>
                     </div>
                     <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
-                        <div class="flex-shrink-0 p-4 bg-indigo-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Figma UI Kit</div>
+                        <div class="shrink-0 p-4 bg-indigo-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Figma UI Kit</div>
                         <div class="flex-1 flex gap-4 flex-col"></div>
                         <div class="flex-1 flex gap-4 flex-col">
                             <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-indigo-500 border-l-8">
@@ -129,7 +129,7 @@
                         <div class="flex-1 flex gap-4 flex-col"></div>
                     </div>
                     <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
-                        <div class="flex-shrink-0 p-4 bg-teal-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">SHOWCASE</div>
+                        <div class="shrink-0 p-4 bg-teal-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">SHOWCASE</div>
                         <div class="flex-1 flex gap-4 flex-col"></div>
                         <div class="flex-1 flex gap-4 flex-col"></div>
                         <div class="flex-1 flex gap-4 flex-col">
@@ -144,7 +144,7 @@
                         <div class="flex-1 flex gap-4 flex-col"></div>
                     </div>
                     <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
-                        <div class="flex-shrink-0 p-4 bg-orange-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">PrimeBlocks</div>
+                        <div class="shrink-0 p-4 bg-orange-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">PrimeBlocks</div>
                         <div class="flex-1 flex gap-4 flex-col"></div>
                         <div class="flex-1 flex gap-4 flex-col">
                             <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-orange-500 border-l-8">
@@ -167,7 +167,7 @@
                         <div class="flex-1 flex gap-4 flex-col"></div>
                     </div>
                     <div class="flex gap-4 border-b border-surface-200 dark:border-surface-700 pb-4">
-                        <div class="flex-shrink-0 p-4 bg-pink-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Design</div>
+                        <div class="shrink-0 p-4 bg-pink-500 text-white rounded font-bold text-lg flex items-center justify-center w-56">Design</div>
                         <div class="flex-1 flex gap-4 flex-col">
                             <div class="p-4 bg-surface-0 dark:bg-surface-900 rounded border-pink-500 border-l-8">
                                 <h2 class="text-lg font-bold mt-0 mb-2">New UI Theme</h2>
diff --git a/pages/uikit/index.vue b/pages/uikit/index.vue
index fe06ba42d..6a44599a3 100644
--- a/pages/uikit/index.vue
+++ b/pages/uikit/index.vue
@@ -160,7 +160,7 @@
                                     <span class="text-2xl font-bold text-surface-500 dark:text-surface-400">$99</span>
                                 </div>
                                 <hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
-                                <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
+                                <ul class="list-none p-0 m-0 grow text-lg">
                                     <li class="flex items-center mb-4">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span class="font-bold">1 Designer</span>
@@ -202,7 +202,7 @@
                                     <span class="text-2xl font-bold text-surface-500 dark:text-surface-400">$249</span>
                                 </div>
                                 <hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
-                                <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
+                                <ul class="list-none p-0 m-0 grow text-lg">
                                     <li class="flex items-center mb-4">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span class="font-bold">Up to 5 Designers</span>
@@ -244,7 +244,7 @@
                                     <span class="text-2xl font-bold">EXCLUSIVE DEALS</span>
                                 </div>
                                 <hr class="my-4 mx-0 border-t border-0 border-surface-200 dark:border-surface-700" />
-                                <ul class="list-none p-0 m-0 flex-grow-1 text-lg">
+                                <ul class="list-none p-0 m-0 grow text-lg">
                                     <li class="flex items-center mb-4">
                                         <i class="pi pi-check-circle text-green-500 mr-2"></i>
                                         <span class="font-bold">Unlimited Designers</span>