From d4748cbebb38889807041be47b9ef197e885756c Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 24 Jan 2024 12:08:37 +0300
Subject: [PATCH] Update carousel demos, fixed dataview visual bug with hidden
 icon

---
 doc/carousel/BasicDoc.vue                 | 88 ++++++++++++----------
 doc/carousel/CircularDoc.vue              | 88 ++++++++++++----------
 doc/carousel/ResponsiveDoc.vue            | 89 ++++++++++++----------
 doc/carousel/VerticalDoc.vue              | 91 ++++++++++++-----------
 public/themes/aura-dark-amber/theme.css   |  4 +
 public/themes/aura-dark-blue/theme.css    |  4 +
 public/themes/aura-dark-cyan/theme.css    |  4 +
 public/themes/aura-dark-green/theme.css   |  4 +
 public/themes/aura-dark-indigo/theme.css  |  4 +
 public/themes/aura-dark-lime/theme.css    |  4 +
 public/themes/aura-dark-noir/theme.css    |  4 +
 public/themes/aura-dark-pink/theme.css    |  4 +
 public/themes/aura-dark-purple/theme.css  |  4 +
 public/themes/aura-dark-teal/theme.css    |  4 +
 public/themes/aura-light-amber/theme.css  |  4 +
 public/themes/aura-light-blue/theme.css   |  4 +
 public/themes/aura-light-cyan/theme.css   |  4 +
 public/themes/aura-light-green/theme.css  |  4 +
 public/themes/aura-light-indigo/theme.css |  4 +
 public/themes/aura-light-lime/theme.css   |  4 +
 public/themes/aura-light-noir/theme.css   |  4 +
 public/themes/aura-light-pink/theme.css   |  4 +
 public/themes/aura-light-purple/theme.css |  4 +
 public/themes/aura-light-teal/theme.css   |  4 +
 24 files changed, 273 insertions(+), 163 deletions(-)

diff --git a/doc/carousel/BasicDoc.vue b/doc/carousel/BasicDoc.vue
index 4809f8aba..686e99d3b 100644
--- a/doc/carousel/BasicDoc.vue
+++ b/doc/carousel/BasicDoc.vue
@@ -6,19 +6,21 @@
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div class="border-1 surface-border border-round m-2  p-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" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                            <Button icon="pi pi-search" rounded />
-                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
+                        <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" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
+                    <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-content-between align-items-center">
+                        <div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
+                        <span>
+                            <Button icon="pi pi-heart" severity="secondary" outlined />
+                            <Button icon="pi pi-shopping-cart" class="ml-2"/>
+                        </span>
+                    </div>
                 </div>
             </template>
         </Carousel>
@@ -59,19 +61,21 @@ export default {
                 basic: `
 <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
     <template #item="slotProps">
-        <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
+        <div class="border-1 surface-border border-round m-2  p-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" />
-            </div>
-            <div>
-                <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
-                <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                    <Button icon="pi pi-search" rounded />
-                    <Button icon="pi pi-star-fill" rounded severity="secondary" />
+                <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" />
+                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                 </div>
             </div>
+            <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
+            <div class="flex justify-content-between align-items-center">
+                <div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
+                <span>
+                    <Button icon="pi pi-heart" severity="secondary" outlined />
+                    <Button icon="pi pi-shopping-cart" class="ml-2"/>
+                </span>
+            </div>
         </div>
     </template>
 </Carousel>
@@ -81,19 +85,21 @@ export default {
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div class="border-1 surface-border border-round m-2  p-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" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                            <Button icon="pi pi-search" rounded />
-                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
+                        <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" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
+                    <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-content-between align-items-center">
+                        <div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
+                        <span>
+                            <Button icon="pi pi-heart" severity="secondary" outlined />
+                            <Button icon="pi pi-shopping-cart" class="ml-2"/>
+                        </span>
+                    </div>
                 </div>
             </template>
         </Carousel>
@@ -159,19 +165,21 @@ export default {
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div class="border-1 surface-border border-round m-2  p-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" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                            <Button icon="pi pi-search" rounded />
-                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
+                        <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" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
+                    <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-content-between align-items-center">
+                        <div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
+                        <span>
+                            <Button icon="pi pi-heart" severity="secondary" outlined />
+                            <Button icon="pi pi-shopping-cart" class="ml-2"/>
+                        </span>
+                    </div>
                 </div>
             </template>
         </Carousel>
diff --git a/doc/carousel/CircularDoc.vue b/doc/carousel/CircularDoc.vue
index e3a712df2..b1ab99927 100644
--- a/doc/carousel/CircularDoc.vue
+++ b/doc/carousel/CircularDoc.vue
@@ -6,19 +6,21 @@
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
             <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div class="border-1 surface-border border-round m-2  p-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" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                            <Button icon="pi pi-search" rounded />
-                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
+                        <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" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
+                    <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-content-between align-items-center">
+                        <div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
+                        <span>
+                            <Button icon="pi pi-heart" severity="secondary" outlined />
+                            <Button icon="pi pi-shopping-cart" class="ml-2"/>
+                        </span>
+                    </div>
                 </div>
             </template>
         </Carousel>
@@ -59,19 +61,21 @@ export default {
                 basic: `
 <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
     <template #item="slotProps">
-        <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
+        <div class="border-1 surface-border border-round m-2  p-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" />
-            </div>
-            <div>
-                <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
-                <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                    <Button icon="pi pi-search" rounded />
-                    <Button icon="pi pi-star-fill" rounded severity="secondary" />
+                <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" />
+                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                 </div>
             </div>
+            <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
+            <div class="flex justify-content-between align-items-center">
+                <div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
+                <span>
+                    <Button icon="pi pi-heart" severity="secondary" outlined />
+                    <Button icon="pi pi-shopping-cart" class="ml-2"/>
+                </span>
+            </div>
         </div>
     </template>
 </Carousel>
@@ -81,19 +85,21 @@ export default {
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
             <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div class="border-1 surface-border border-round m-2  p-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" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                            <Button icon="pi pi-search" rounded />
-                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
+                        <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" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
+                    <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-content-between align-items-center">
+                        <div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
+                        <span>
+                            <Button icon="pi pi-heart" severity="secondary" outlined />
+                            <Button icon="pi pi-shopping-cart" class="ml-2"/>
+                        </span>
+                    </div>
                 </div>
             </template>
         </Carousel>
@@ -159,19 +165,21 @@ export default {
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" circular :autoplayInterval="3000">
             <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div class="border-1 surface-border border-round m-2  p-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" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                            <Button icon="pi pi-search" rounded />
-                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
+                        <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" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
+                    <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-content-between align-items-center">
+                        <div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
+                        <span>
+                            <Button icon="pi pi-heart" severity="secondary" outlined />
+                            <Button icon="pi pi-shopping-cart" class="ml-2"/>
+                        </span>
+                    </div>
                 </div>
             </template>
         </Carousel>
diff --git a/doc/carousel/ResponsiveDoc.vue b/doc/carousel/ResponsiveDoc.vue
index a6c6d20b8..af8cb3605 100644
--- a/doc/carousel/ResponsiveDoc.vue
+++ b/doc/carousel/ResponsiveDoc.vue
@@ -9,19 +9,21 @@
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div class="border-1 surface-border border-round m-2  p-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" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                            <Button icon="pi pi-search" rounded />
-                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
+                        <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" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
+                    <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-content-between align-items-center">
+                        <div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
+                        <span>
+                            <Button icon="pi pi-heart" severity="secondary" outlined />
+                            <Button icon="pi pi-shopping-cart" class="ml-2"/>
+                        </span>
+                    </div>
                 </div>
             </template>
         </Carousel>
@@ -62,19 +64,21 @@ export default {
                 basic: `
 <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
     <template #item="slotProps">
-        <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
+        <div class="border-1 surface-border border-round m-2  p-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" />
-            </div>
-            <div>
-                <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
-                <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                    <Button icon="pi pi-search" rounded />
-                    <Button icon="pi pi-star-fill" rounded severity="secondary" />
+                <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" />
+                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                 </div>
             </div>
+            <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
+            <div class="flex justify-content-between align-items-center">
+                <div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
+                <span>
+                    <Button icon="pi pi-heart" severity="secondary" outlined />
+                    <Button icon="pi pi-shopping-cart" class="ml-2"/>
+                </span>
+            </div>
         </div>
     </template>
 </Carousel>
@@ -84,19 +88,21 @@ export default {
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div class="border-1 surface-border border-round m-2  p-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" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                            <Button icon="pi pi-search" rounded />
-                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
+                        <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" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
+                    <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-content-between align-items-center">
+                        <div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
+                        <span>
+                            <Button icon="pi pi-heart" severity="secondary" outlined />
+                            <Button icon="pi pi-shopping-cart" class="ml-2"/>
+                        </span>
+                    </div>
                 </div>
             </template>
         </Carousel>
@@ -162,20 +168,21 @@ export default {
     <div class="card">
         <Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions">
             <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div class="border-1 surface-border border-round m-2  p-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" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5">
-                            <Button icon="pi pi-search" rounded class="mr-2" />
-                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
-                            <Button icon="pi pi-cog" rounded severity="help" />
+                        <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" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
+                    <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-content-between align-items-center">
+                        <div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
+                        <span>
+                            <Button icon="pi pi-heart" severity="secondary" outlined />
+                            <Button icon="pi pi-shopping-cart" class="ml-2"/>
+                        </span>
+                    </div>
                 </div>
             </template>
         </Carousel>
diff --git a/doc/carousel/VerticalDoc.vue b/doc/carousel/VerticalDoc.vue
index 8a4797201..17e21c88a 100644
--- a/doc/carousel/VerticalDoc.vue
+++ b/doc/carousel/VerticalDoc.vue
@@ -6,19 +6,21 @@
     <div class="card">
         <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" contentClass="flex align-items-center">
             <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div class="border-1 surface-border border-round m-2  p-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" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3">${{ slotProps.data.price }}</h6>
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                            <Button icon="pi pi-search" rounded />
-                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
+                        <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" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
+                    <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-content-between align-items-center">
+                        <div class="mt-0 font-semibold text-xl">${{ slotProps.data.price }}</div>
+                        <span>
+                            <Button icon="pi pi-heart" severity="secondary" outlined />
+                            <Button icon="pi pi-shopping-cart" class="ml-2"/>
+                        </span>
+                    </div>
                 </div>
             </template>
         </Carousel>
@@ -37,19 +39,21 @@ export default {
                 basic: `
 <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" contentClass="flex align-items-center">
     <template #item="slotProps">
-        <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
+        <div class="border-1 surface-border border-round m-2  p-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" />
-            </div>
-            <div>
-                <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
-                <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                    <Button icon="pi pi-search" rounded />
-                    <Button icon="pi pi-star-fill" rounded severity="secondary" />
+                <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" />
+                    <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                 </div>
             </div>
+            <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
+            <div class="flex justify-content-between align-items-center">
+                <div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
+                <span>
+                    <Button icon="pi pi-heart" severity="secondary" outlined />
+                    <Button icon="pi pi-shopping-cart" class="ml-2"/>
+                </span>
+            </div>
         </div>
     </template>
 </Carousel>
@@ -59,19 +63,21 @@ export default {
     <div class="card">
         <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" contentClass="flex align-items-center">
             <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div class="border-1 surface-border border-round m-2  p-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" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5 flex align-items-center justify-content-center gap-2">
-                            <Button icon="pi pi-search" rounded />
-                            <Button icon="pi pi-star-fill" rounded severity="secondary" />
+                        <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" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
+                    <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-content-between align-items-center">
+                        <div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
+                        <span>
+                            <Button icon="pi pi-heart" severity="secondary" outlined />
+                            <Button icon="pi pi-shopping-cart" class="ml-2"/>
+                        </span>
+                    </div>
                 </div>
             </template>
         </Carousel>
@@ -115,23 +121,24 @@ export default {
     <div class="card">
         <Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="330px" contentClass="flex align-items-center">
             <template #item="slotProps">
-                <div class="border-1 surface-border border-round m-2 text-center py-5 px-3">
+                <div class="border-1 surface-border border-round m-2  p-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" />
-                    </div>
-                    <div>
-                        <h4 class="mb-1">{{ slotProps.data.name }}</h4>
-                        <h6 class="mt-0 mb-3">\${{ slotProps.data.price }}</h6>
-                        <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" />
-                        <div class="mt-5">
-                            <Button icon="pi pi-search" rounded class="mr-2" />
-                            <Button icon="pi pi-star-fill" rounded severity="success" class="mr-2" />
-                            <Button icon="pi pi-cog" rounded severity="help" />
+                        <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" />
+                            <Tag :value="slotProps.data.inventoryStatus" :severity="getSeverity(slotProps.data.inventoryStatus)" class="absolute" style="left:5px; top: 5px"/>
                         </div>
                     </div>
+                    <div class="mb-3 font-medium">{{ slotProps.data.name }}</div>
+                    <div class="flex justify-content-between align-items-center">
+                        <div class="mt-0 font-semibold text-xl">\${{ slotProps.data.price }}</div>
+                        <span>
+                            <Button icon="pi pi-heart" severity="secondary" outlined />
+                            <Button icon="pi pi-shopping-cart" class="ml-2"/>
+                        </span>
+                    </div>
                 </div>
             </template>
-        </Carousel>
+                </Carousel>
     </div>
 </template>
 
diff --git a/public/themes/aura-dark-amber/theme.css b/public/themes/aura-dark-amber/theme.css
index c3530c152..e9c811e93 100644
--- a/public/themes/aura-dark-amber/theme.css
+++ b/public/themes/aura-dark-amber/theme.css
@@ -6118,6 +6118,10 @@
     border-bottom-color: rgba(250, 183, 8, 0.16);
   }
 
+  .p-dataview-layout-options.p-selectbutton .p-button svg {
+    position: relative;
+  }
+
   .p-dialog {
     border-radius: 12px;
     background-color: #18181b;
diff --git a/public/themes/aura-dark-blue/theme.css b/public/themes/aura-dark-blue/theme.css
index e7294e17b..0bb55bb72 100644
--- a/public/themes/aura-dark-blue/theme.css
+++ b/public/themes/aura-dark-blue/theme.css
@@ -6118,6 +6118,10 @@
     border-bottom-color: rgba(62, 146, 249, 0.16);
   }
 
+  .p-dataview-layout-options.p-selectbutton .p-button svg {
+    position: relative;
+  }
+
   .p-dialog {
     border-radius: 12px;
     background-color: #18181b;
diff --git a/public/themes/aura-dark-cyan/theme.css b/public/themes/aura-dark-cyan/theme.css
index 35110f208..a8c3319fb 100644
--- a/public/themes/aura-dark-cyan/theme.css
+++ b/public/themes/aura-dark-cyan/theme.css
@@ -6118,6 +6118,10 @@
     border-bottom-color: rgba(17, 200, 227, 0.16);
   }
 
+  .p-dataview-layout-options.p-selectbutton .p-button svg {
+    position: relative;
+  }
+
   .p-dialog {
     border-radius: 12px;
     background-color: #18181b;
diff --git a/public/themes/aura-dark-green/theme.css b/public/themes/aura-dark-green/theme.css
index 0286e4d2b..a912219ed 100644
--- a/public/themes/aura-dark-green/theme.css
+++ b/public/themes/aura-dark-green/theme.css
@@ -6118,6 +6118,10 @@
     border-bottom-color: rgba(42, 195, 139, 0.16);
   }
 
+  .p-dataview-layout-options.p-selectbutton .p-button svg {
+    position: relative;
+  }
+
   .p-dialog {
     border-radius: 12px;
     background-color: #18181b;
diff --git a/public/themes/aura-dark-indigo/theme.css b/public/themes/aura-dark-indigo/theme.css
index b8d71a831..a196184ee 100644
--- a/public/themes/aura-dark-indigo/theme.css
+++ b/public/themes/aura-dark-indigo/theme.css
@@ -6118,6 +6118,10 @@
     border-bottom-color: rgba(93, 107, 246, 0.16);
   }
 
+  .p-dataview-layout-options.p-selectbutton .p-button svg {
+    position: relative;
+  }
+
   .p-dialog {
     border-radius: 12px;
     background-color: #18181b;
diff --git a/public/themes/aura-dark-lime/theme.css b/public/themes/aura-dark-lime/theme.css
index 4d8961961..19c9b7965 100644
--- a/public/themes/aura-dark-lime/theme.css
+++ b/public/themes/aura-dark-lime/theme.css
@@ -6118,6 +6118,10 @@
     border-bottom-color: rgba(151, 227, 28, 0.16);
   }
 
+  .p-dataview-layout-options.p-selectbutton .p-button svg {
+    position: relative;
+  }
+
   .p-dialog {
     border-radius: 12px;
     background-color: #18181b;
diff --git a/public/themes/aura-dark-noir/theme.css b/public/themes/aura-dark-noir/theme.css
index 3445e2dc5..cb5ef43d2 100644
--- a/public/themes/aura-dark-noir/theme.css
+++ b/public/themes/aura-dark-noir/theme.css
@@ -6118,6 +6118,10 @@
     border-bottom-color: rgba(225, 225, 225, 0.16);
   }
 
+  .p-dataview-layout-options.p-selectbutton .p-button svg {
+    position: relative;
+  }
+
   .p-dialog {
     border-radius: 12px;
     background-color: #18181b;
diff --git a/public/themes/aura-dark-pink/theme.css b/public/themes/aura-dark-pink/theme.css
index 794bc6f23..c5ef85a12 100644
--- a/public/themes/aura-dark-pink/theme.css
+++ b/public/themes/aura-dark-pink/theme.css
@@ -6118,6 +6118,10 @@
     border-bottom-color: rgba(241, 81, 165, 0.16);
   }
 
+  .p-dataview-layout-options.p-selectbutton .p-button svg {
+    position: relative;
+  }
+
   .p-dialog {
     border-radius: 12px;
     background-color: #18181b;
diff --git a/public/themes/aura-dark-purple/theme.css b/public/themes/aura-dark-purple/theme.css
index 8caa2b52d..5b003d302 100644
--- a/public/themes/aura-dark-purple/theme.css
+++ b/public/themes/aura-dark-purple/theme.css
@@ -6118,6 +6118,10 @@
     border-bottom-color: rgba(139, 102, 248, 0.16);
   }
 
+  .p-dataview-layout-options.p-selectbutton .p-button svg {
+    position: relative;
+  }
+
   .p-dialog {
     border-radius: 12px;
     background-color: #18181b;
diff --git a/public/themes/aura-dark-teal/theme.css b/public/themes/aura-dark-teal/theme.css
index f242c03a5..a92e78131 100644
--- a/public/themes/aura-dark-teal/theme.css
+++ b/public/themes/aura-dark-teal/theme.css
@@ -6118,6 +6118,10 @@
     border-bottom-color: rgba(39, 192, 173, 0.16);
   }
 
+  .p-dataview-layout-options.p-selectbutton .p-button svg {
+    position: relative;
+  }
+
   .p-dialog {
     border-radius: 12px;
     background-color: #18181b;
diff --git a/public/themes/aura-light-amber/theme.css b/public/themes/aura-light-amber/theme.css
index 584709130..47d19efc5 100644
--- a/public/themes/aura-light-amber/theme.css
+++ b/public/themes/aura-light-amber/theme.css
@@ -6120,6 +6120,10 @@
     border-bottom-color: #fff1ba;
   }
 
+  .p-dataview-layout-options.p-selectbutton .p-button svg {
+    position: relative;
+  }
+
   .p-dialog {
     border-radius: 12px;
     background-color: #ffffff;
diff --git a/public/themes/aura-light-blue/theme.css b/public/themes/aura-light-blue/theme.css
index 940614744..d5c8cb7f0 100644
--- a/public/themes/aura-light-blue/theme.css
+++ b/public/themes/aura-light-blue/theme.css
@@ -6120,6 +6120,10 @@
     border-bottom-color: #bedaff;
   }
 
+  .p-dataview-layout-options.p-selectbutton .p-button svg {
+    position: relative;
+  }
+
   .p-dialog {
     border-radius: 12px;
     background-color: #ffffff;
diff --git a/public/themes/aura-light-cyan/theme.css b/public/themes/aura-light-cyan/theme.css
index f09b16a02..52e209b03 100644
--- a/public/themes/aura-light-cyan/theme.css
+++ b/public/themes/aura-light-cyan/theme.css
@@ -6120,6 +6120,10 @@
     border-bottom-color: #bbfbff;
   }
 
+  .p-dataview-layout-options.p-selectbutton .p-button svg {
+    position: relative;
+  }
+
   .p-dialog {
     border-radius: 12px;
     background-color: #ffffff;
diff --git a/public/themes/aura-light-green/theme.css b/public/themes/aura-light-green/theme.css
index 3aae8d208..94b0e4d58 100644
--- a/public/themes/aura-light-green/theme.css
+++ b/public/themes/aura-light-green/theme.css
@@ -6120,6 +6120,10 @@
     border-bottom-color: #c0f8de;
   }
 
+  .p-dataview-layout-options.p-selectbutton .p-button svg {
+    position: relative;
+  }
+
   .p-dialog {
     border-radius: 12px;
     background-color: #ffffff;
diff --git a/public/themes/aura-light-indigo/theme.css b/public/themes/aura-light-indigo/theme.css
index f619c7026..ae80c9a56 100644
--- a/public/themes/aura-light-indigo/theme.css
+++ b/public/themes/aura-light-indigo/theme.css
@@ -6120,6 +6120,10 @@
     border-bottom-color: #bdccff;
   }
 
+  .p-dataview-layout-options.p-selectbutton .p-button svg {
+    position: relative;
+  }
+
   .p-dialog {
     border-radius: 12px;
     background-color: #ffffff;
diff --git a/public/themes/aura-light-lime/theme.css b/public/themes/aura-light-lime/theme.css
index 7048d880e..ebd4bd367 100644
--- a/public/themes/aura-light-lime/theme.css
+++ b/public/themes/aura-light-lime/theme.css
@@ -6120,6 +6120,10 @@
     border-bottom-color: #e7fcb8;
   }
 
+  .p-dataview-layout-options.p-selectbutton .p-button svg {
+    position: relative;
+  }
+
   .p-dialog {
     border-radius: 12px;
     background-color: #ffffff;
diff --git a/public/themes/aura-light-noir/theme.css b/public/themes/aura-light-noir/theme.css
index b8a9e595a..12b14a593 100644
--- a/public/themes/aura-light-noir/theme.css
+++ b/public/themes/aura-light-noir/theme.css
@@ -6128,6 +6128,10 @@
     border-bottom-color: #020515;
   }
 
+  .p-dataview-layout-options.p-selectbutton .p-button svg {
+    position: relative;
+  }
+
   .p-dialog {
     border-radius: 12px;
     background-color: #ffffff;
diff --git a/public/themes/aura-light-pink/theme.css b/public/themes/aura-light-pink/theme.css
index 4ebfbb147..a14a57472 100644
--- a/public/themes/aura-light-pink/theme.css
+++ b/public/themes/aura-light-pink/theme.css
@@ -6120,6 +6120,10 @@
     border-bottom-color: #f6c7e1;
   }
 
+  .p-dataview-layout-options.p-selectbutton .p-button svg {
+    position: relative;
+  }
+
   .p-dialog {
     border-radius: 12px;
     background-color: #ffffff;
diff --git a/public/themes/aura-light-purple/theme.css b/public/themes/aura-light-purple/theme.css
index 0aa2dd739..935efcbcf 100644
--- a/public/themes/aura-light-purple/theme.css
+++ b/public/themes/aura-light-purple/theme.css
@@ -6120,6 +6120,10 @@
     border-bottom-color: #ccc1ff;
   }
 
+  .p-dataview-layout-options.p-selectbutton .p-button svg {
+    position: relative;
+  }
+
   .p-dialog {
     border-radius: 12px;
     background-color: #ffffff;
diff --git a/public/themes/aura-light-teal/theme.css b/public/themes/aura-light-teal/theme.css
index e977d3843..509a14b28 100644
--- a/public/themes/aura-light-teal/theme.css
+++ b/public/themes/aura-light-teal/theme.css
@@ -6120,6 +6120,10 @@
     border-bottom-color: #c5f7ec;
   }
 
+  .p-dataview-layout-options.p-selectbutton .p-button svg {
+    position: relative;
+  }
+
   .p-dialog {
     border-radius: 12px;
     background-color: #ffffff;