diff --git a/apps/showcase/doc/dataview/BasicDoc.vue b/apps/showcase/doc/dataview/BasicDoc.vue
index 9a63c558d..7f7d397ec 100644
--- a/apps/showcase/doc/dataview/BasicDoc.vue
+++ b/apps/showcase/doc/dataview/BasicDoc.vue
@@ -10,7 +10,9 @@
                         <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 dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                </div>
                             </div>
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -58,7 +60,9 @@ export default {
                 <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 dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                        <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                            <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                        </div>
                     </div>
                     <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                         <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -97,7 +101,9 @@ export default {
                         <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 dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                </div>
                             </div>
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -170,7 +176,9 @@ export default {
                         <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 dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                </div>
                             </div>
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
diff --git a/apps/showcase/doc/dataview/LayoutDoc.vue b/apps/showcase/doc/dataview/LayoutDoc.vue
index f6a974112..4eac835b5 100644
--- a/apps/showcase/doc/dataview/LayoutDoc.vue
+++ b/apps/showcase/doc/dataview/LayoutDoc.vue
@@ -20,7 +20,9 @@
                         <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 dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                </div>
                             </div>
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -55,7 +57,9 @@
                             <div class="bg-surface-50 flex justify-center rounded p-4">
                                 <div class="relative mx-auto">
                                     <img class="rounded w-full" :src="`https://primefaces.org/cdn/primevue/images/product/${item.image}`" :alt="item.name" style="max-width: 300px" />
-                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                    <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                    </div>
                                 </div>
                             </div>
                             <div class="pt-6">
@@ -116,7 +120,9 @@ export default {
                 <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 dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                        <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                            <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                        </div>
                     </div>
                     <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                         <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -151,7 +157,9 @@ export default {
                     <div class="bg-surface-50 flex justify-center rounded p-4">
                         <div class="relative mx-auto">
                             <img class="rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" style="max-width: 300px"/>
-                            <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                            <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                            </div>
                         </div>
                     </div>
                     <div class="pt-6">
@@ -201,7 +209,9 @@ export default {
                         <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 dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                </div>
                             </div>
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -236,7 +246,9 @@ export default {
                             <div class="bg-surface-50 flex justify-center rounded p-4">
                                 <div class="relative mx-auto">
                                     <img class="rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" style="max-width: 300px"/>
-                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                    <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                    </div>
                                 </div>
                             </div>
                             <div class="pt-6">
@@ -322,7 +334,9 @@ export default {
                         <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 dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                 <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                </div>
                             </div>
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -357,7 +371,9 @@ export default {
                             <div class="bg-surface-50 flex justify-center rounded p-4">
                                 <div class="relative mx-auto">
                                     <img class="rounded w-full" :src="\`https://primefaces.org/cdn/primevue/images/product/\${item.image}\`" :alt="item.name" style="max-width: 300px"/>
-                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)" class="absolute dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                    <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                        <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                    </div>
                                 </div>
                             </div>
                             <div class="pt-6">
diff --git a/apps/showcase/doc/dataview/PaginationDoc.vue b/apps/showcase/doc/dataview/PaginationDoc.vue
index 525255be1..99a78c53e 100644
--- a/apps/showcase/doc/dataview/PaginationDoc.vue
+++ b/apps/showcase/doc/dataview/PaginationDoc.vue
@@ -10,7 +10,9 @@
                         <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 dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                </div>
                             </div>
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -58,7 +60,9 @@ export default {
                 <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 dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                        <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                            <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                        </div>
                     </div>
                     <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                         <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -97,7 +101,9 @@ export default {
                         <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 dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                </div>
                             </div>
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -170,7 +176,9 @@ export default {
                         <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 dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                </div>
                             </div>
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
diff --git a/apps/showcase/doc/dataview/SortingDoc.vue b/apps/showcase/doc/dataview/SortingDoc.vue
index e0311b95f..92ad24a4d 100644
--- a/apps/showcase/doc/dataview/SortingDoc.vue
+++ b/apps/showcase/doc/dataview/SortingDoc.vue
@@ -13,7 +13,9 @@
                         <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 dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                </div>
                             </div>
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -71,7 +73,9 @@ export default {
                 <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 dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                        <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                            <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                        </div>
                     </div>
                     <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                         <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -113,7 +117,9 @@ export default {
                         <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 dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                </div>
                             </div>
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">
@@ -210,7 +216,9 @@ export default {
                         <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 dark:!bg-surface-900" style="left: 4px; top: 4px"></Tag>
+                                <div class="absolute bg-black/70 rounded-border" style="left: 4px; top: 4px">
+                                    <Tag :value="item.inventoryStatus" :severity="getSeverity(item)"></Tag>
+                                </div>
                             </div>
                             <div class="flex flex-col md:flex-row justify-between md:items-center flex-1 gap-6">
                                 <div class="flex flex-row md:flex-col justify-between items-start gap-2">