diff --git a/doc/dataview/BasicDoc.vue b/doc/dataview/BasicDoc.vue
index 1aa9d53d6..17fce0389 100644
--- a/doc/dataview/BasicDoc.vue
+++ b/doc/dataview/BasicDoc.vue
@@ -5,9 +5,9 @@
     <div class="card">
         <DataView :value="products">
             <template #list="slotProps">
-                <div class="grid grid-cols-12 gap-4 grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
-                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                <div class="flex flex-col">
+                    <div v-for="(item, index) in slotProps.items" :key="index">
+                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                             <div class="md:w-40 relative">
                                 <img class="block xl:block mx-auto rounded 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>
@@ -53,9 +53,9 @@ export default {
                 basic: `
 <DataView :value="products">
     <template #list="slotProps">
-        <div class="grid grid-cols-12 gap-4 grid-nogutter">
-            <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
-                <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+        <div class="flex flex-col">
+            <div v-for="(item, index) in slotProps.items" :key="index">
+                <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                     <div class="md:w-40 relative">
                         <img class="block xl:block mx-auto rounded 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>
@@ -92,9 +92,9 @@ export default {
     <div class="card">
         <DataView :value="products">
             <template #list="slotProps">
-                <div class="grid grid-cols-12 gap-4 grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
-                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                <div class="flex flex-col">
+                    <div v-for="(item, index) in slotProps.items" :key="index">
+                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                             <div class="md:w-40 relative">
                                 <img class="block xl:block mx-auto rounded 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>
@@ -165,9 +165,9 @@ export default {
     <div class="card">
         <DataView :value="products">
             <template #list="slotProps">
-                <div class="grid grid-cols-12 gap-4 grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
-                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                <div class="flex flex-col">
+                    <div v-for="(item, index) in slotProps.items" :key="index">
+                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                             <div class="md:w-40 relative">
                                 <img class="block xl:block mx-auto rounded 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>
diff --git a/doc/dataview/LayoutDoc.vue b/doc/dataview/LayoutDoc.vue
index e025018b3..eb6b92830 100644
--- a/doc/dataview/LayoutDoc.vue
+++ b/doc/dataview/LayoutDoc.vue
@@ -15,9 +15,9 @@
             </template>
 
             <template #list="slotProps">
-                <div class="grid grid-cols-12 gap-4 grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
-                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                <div class="flex flex-col">
+                    <div v-for="(item, index) in slotProps.items" :key="index">
+                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                             <div class="md:w-40 relative">
                                 <img class="block xl:block mx-auto rounded 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>
@@ -111,9 +111,9 @@ export default {
     </template>
 
     <template #list="slotProps">
-        <div class="grid grid-cols-12 gap-4 grid-nogutter">
-            <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
-                <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+        <div class="flex flex-col">
+            <div v-for="(item, index) in slotProps.items" :key="index">
+                <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                     <div class="md:w-40 relative">
                         <img class="block xl:block mx-auto rounded 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>
@@ -196,9 +196,9 @@ export default {
             </template>
 
             <template #list="slotProps">
-                <div class="grid grid-cols-12 gap-4 grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
-                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                <div class="flex flex-col">
+                    <div v-for="(item, index) in slotProps.items" :key="index">
+                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                             <div class="md:w-40 relative">
                                 <img class="block xl:block mx-auto rounded 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>
@@ -317,9 +317,9 @@ export default {
             </template>
 
             <template #list="slotProps">
-                <div class="grid grid-cols-12 gap-4 grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
-                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                <div class="flex flex-col">
+                    <div v-for="(item, index) in slotProps.items" :key="index"">
+                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                             <div class="md:w-40 relative">
                                 <img class="block xl:block mx-auto rounded 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>
diff --git a/doc/dataview/LoadingDoc.vue b/doc/dataview/LoadingDoc.vue
index 998cee283..06d4b1f57 100644
--- a/doc/dataview/LoadingDoc.vue
+++ b/doc/dataview/LoadingDoc.vue
@@ -15,8 +15,8 @@
             </template>
 
             <template #list>
-                <div class="grid grid-cols-12 gap-4 grid-nogutter">
-                    <div v-for="i in 6" :key="i" class="col-span-12">
+                <div class="flex flex-col">
+                    <div v-for="i in 6" :key="i">
                         <div class="flex flex-col xl:flex-row xl:items-start p-6 gap-6" :class="{ 'border-top-1 surface-border': i !== 0 }">
                             <Skeleton class="w-9/12 sm:w-64 xl:w-40 h-24 block xl:block mx-auto rounded" />
                             <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-6">
@@ -39,7 +39,7 @@
             </template>
 
             <template #grid>
-                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                <div class="grid grid-cols-12 gap-4">
                     <div v-for="i in 6" :key="i" class="col-span-12 sm:col-span-6 lg:col-span-12 xl:col-span-4 p-2">
                         <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded">
                             <div class="flex flex-wrap items-center justify-between gap-2">
@@ -87,8 +87,8 @@ export default {
     </template>
 
     <template #list>
-        <div class="grid grid-cols-12 gap-4 grid-nogutter">
-            <div v-for="i in 6" :key="i" class="col-span-12">
+        <div class="flex flex-col">
+            <div v-for="i in 6" :key="i">
                 <div class="flex flex-col xl:flex-row xl:items-start p-6 gap-6" :class="{ 'border-top-1 surface-border': i !== 0 }">
                     <Skeleton class="w-9/12 sm:w-64 xl:w-40 h-24 block xl:block mx-auto rounded" />
                     <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-6">
@@ -111,7 +111,7 @@ export default {
     </template>
 
     <template #grid>
-        <div class="grid grid-cols-12 gap-4 grid-nogutter">
+        <div class="grid grid-cols-12 gap-4">
             <div v-for="i in 6" :key="i" class="col-span-12 sm:col-span-6 lg:col-span-12 xl:col-span-4 p-2">
                 <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded">
                     <div class="flex flex-wrap items-center justify-between gap-2">
@@ -148,8 +148,8 @@ export default {
             </template>
 
             <template #list>
-                <div class="grid grid-cols-12 gap-4 grid-nogutter">
-                    <div v-for="i in 6" :key="i" class="col-span-12">
+                <div class="flex flex-col">
+                    <div v-for="i in 6" :key="i">
                         <div class="flex flex-col xl:flex-row xl:items-start p-6 gap-6" :class="{ 'border-top-1 surface-border': i !== 0 }">
                             <Skeleton class="w-9/12 sm:w-64 xl:w-40 h-24 block xl:block mx-auto rounded" />
                             <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-6">
@@ -172,7 +172,7 @@ export default {
             </template>
 
             <template #grid>
-                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                <div class="grid grid-cols-12 gap-4">
                     <div v-for="i in 6" :key="i" class="col-span-12 sm:col-span-6 lg:col-span-12 xl:col-span-4 p-2">
                         <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded">
                             <div class="flex flex-wrap items-center justify-between gap-2">
@@ -245,8 +245,8 @@ export default {
             </template>
 
             <template #list>
-                <div class="grid grid-cols-12 gap-4 grid-nogutter">
-                    <div v-for="i in 6" :key="i" class="col-span-12">
+                <div class="flex flex-col">
+                    <div v-for="i in 6" :key="i">
                         <div class="flex flex-col xl:flex-row xl:items-start p-6 gap-6" :class="{ 'border-top-1 surface-border': i !== 0 }">
                             <Skeleton class="w-9/12 sm:w-64 xl:w-40 h-24 block xl:block mx-auto rounded" />
                             <div class="flex flex-col sm:flex-row justify-between items-center xl:items-start flex-1 gap-6">
@@ -269,7 +269,7 @@ export default {
             </template>
 
             <template #grid>
-                <div class="grid grid-cols-12 gap-4 grid-nogutter">
+                <div class="grid grid-cols-12 gap-4">
                     <div v-for="i in 6" :key="i" class="col-span-12 sm:col-span-6 lg:col-span-12 xl:col-span-4 p-2">
                         <div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded">
                             <div class="flex flex-wrap items-center justify-between gap-2">
diff --git a/doc/dataview/PaginationDoc.vue b/doc/dataview/PaginationDoc.vue
index 60892cf12..7d998eeb6 100644
--- a/doc/dataview/PaginationDoc.vue
+++ b/doc/dataview/PaginationDoc.vue
@@ -5,9 +5,9 @@
     <div class="card">
         <DataView :value="products" paginator :rows="5">
             <template #list="slotProps">
-                <div class="grid grid-cols-12 gap-4 grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
-                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                <div class="flex flex-col">
+                    <div v-for="(item, index) in slotProps.items" :key="index">
+                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                             <div class="md:w-40 relative">
                                 <img class="block xl:block mx-auto rounded 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>
@@ -53,9 +53,9 @@ export default {
                 basic: `
 <DataView :value="products" paginator :rows="5">
     <template #list="slotProps">
-        <div class="grid grid-cols-12 gap-4 grid-nogutter">
-            <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
-                <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+        <div class="flex flex-col">
+            <div v-for="(item, index) in slotProps.items" :key="index">
+                <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                     <div class="md:w-40 relative">
                         <img class="block xl:block mx-auto rounded 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>
@@ -92,9 +92,9 @@ export default {
     <div class="card">
         <DataView :value="products" paginator :rows="5">
             <template #list="slotProps">
-                <div class="grid grid-cols-12 gap-4 grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
-                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                <div class="flex flex-col">
+                    <div v-for="(item, index) in slotProps.items" :key="index">
+                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                             <div class="md:w-40 relative">
                                 <img class="block xl:block mx-auto rounded 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>
@@ -165,9 +165,9 @@ export default {
     <div class="card">
         <DataView :value="products" paginator :rows="5">
             <template #list="slotProps">
-                <div class="grid grid-cols-12 gap-4 grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
-                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                <div class="flex flex-col">
+                    <div v-for="(item, index) in slotProps.items" :key="index">
+                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                             <div class="md:w-40 relative">
                                 <img class="block xl:block mx-auto rounded 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>
diff --git a/doc/dataview/SortingDoc.vue b/doc/dataview/SortingDoc.vue
index e6bb432a5..a2a4278c3 100644
--- a/doc/dataview/SortingDoc.vue
+++ b/doc/dataview/SortingDoc.vue
@@ -8,9 +8,9 @@
                 <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
             </template>
             <template #list="slotProps">
-                <div class="grid grid-cols-12 gap-4 grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
-                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                <div class="flex flex-col">
+                    <div v-for="(item, index) in slotProps.items" :key="index">
+                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                             <div class="md:w-40 relative">
                                 <img class="block xl:block mx-auto rounded 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>
@@ -66,9 +66,9 @@ export default {
         <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
     </template>
     <template #list="slotProps">
-        <div class="grid grid-cols-12 gap-4 grid-nogutter">
-            <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
-                <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+        <div class="flex flex-col">
+            <div v-for="(item, index) in slotProps.items" :key="index">
+                <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                     <div class="md:w-40 relative">
                         <img class="block xl:block mx-auto rounded 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>
@@ -108,9 +108,9 @@ export default {
                 <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
             </template>
             <template #list="slotProps">
-                <div class="grid grid-cols-12 gap-4 grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
-                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                <div class="flex flex-col">
+                    <div v-for="(item, index) in slotProps.items" :key="index">
+                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                             <div class="md:w-40 relative">
                                 <img class="block xl:block mx-auto rounded 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>
@@ -205,9 +205,9 @@ export default {
                 <Select v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)" />
             </template>
             <template #list="slotProps">
-                <div class="grid grid-cols-12 gap-4 grid-nogutter">
-                    <div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12">
-                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-top-1 surface-border': index !== 0 }">
+                <div class="flex flex-col">
+                    <div v-for="(item, index) in slotProps.items" :key="index">
+                        <div class="flex flex-col sm:flex-row sm:items-center p-6 gap-4" :class="{ 'border-t border-surface-200 dark:border-surface-700': index !== 0 }">
                             <div class="md:w-40 relative">
                                 <img class="block xl:block mx-auto rounded 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>